还剩6页未读,继续阅读
文本内容:
详解学习DIV+CSS之绝对定位和相对定位2008-01-2713:40前言在用CSS控制排版过程中,定位一直被人认为是一个难点,这主要是表现为很多网友在没有深入理解清楚定位的原理时,排出来的杂乱网页常让他们不知所措,而另一边一些高手则常常借助定位的强大功能做需些很酷的效果来,比如CSS相册等等,因此自己杂乱的网页与高手完美的设计形成鲜明对比,这在一定程度上打击了初学定位的网友,也在他们心目中形成这样的一种思想当我熟练地玩转CSS定位时,我就已是高手了不管你怎么想,我只希望下面的教程能让你更深入地了解CSS定位属性阅读建议先说说我这篇教程的思路,这对于你在正真开始阅教程前是有很大帮助的我的思路是这样的先给出定位较专业化精炼的解释,接下来再用打比如的方法形象地介绍它们,此时大家要和前面讲到的专业解释对比阅读介绍完理论,将通过实例来介绍定位的各知识点,虽然实例不美,但每一则实例都是精心挑选的,如果要完整掌握CSS定位方法,请务必弄懂每一个实例的原理最后将会带大家做一个较为酷的综合实例如果你想提高你阅读本文的兴趣或者动力,你可以先跳到最后看综合实例的运行效果.定位的专业解释1语法position:static|absoluteIfixed|relative⑵说明从上面语法可以看出,定位的方法有很多种,它们分别是静态static绝对定位absolute固定fixed相对定位relativeo在这个教程里,我不逐一讲,只讲最常用也是最实用的两个定位方法绝对定位absolute相对定位relativeo绝对定位absolute将被赋予此定位方法的对象从文档流中拖出,使用leftrighttopbottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值目前负值FF不支持相对定位relative对象不可层叠,依据leftrighttopbottom等属性在正常文档流中偏移自身位置同样可以用z-index分层设计.定位的形象解释我先来架设一个虚拟的场景有一个矩形的房间,里面还有一个水桶装了些水,水里还浸泡着一个西瓜,这个房间半空中还有不少的钩子用于挂东西用现在我把网页元素与上面物件对应上,那么房间就是一个网页,水桶是网页中的一个板块,桶中的水就是文本流,西瓜就是将要被定位的对象1贡献的绝对定位absolute对照前面解释,如果西瓜被赋予绝对定位,那么就等于把西瓜从水中捞起来挂在半空中的钩子上,水桶中西瓜原来占用的空间水会自动填补它绝对定位对象会让出自己原先占用位置,所以说它是贡献的此时如果之前没有对水桶进行定位设定,那么被拿起的西瓜位置不会再受水桶位置影响,水桶怎么移动,西瓜还是挂在原来位置,至于西瓜要怎放,则以房间左上角body左上角为准,用leftrighttopbottom值来定位但是如果水桶也给出了定位设置通常是相对定位,下面有讲到这一实用技巧,此时西瓜的摆放就没有那么自由了,尽管此时西瓜被拿起来了不会影响水桶中的水(文本流),但它还是要听桶的话,桶会告诉西瓜“你可以活动,但应该在我的范围内走动,比方说我要你在我左上方1米处,你就要跟死这一点,我走你也要跟着走”,如果桶中有很多个西瓜可以全部拿出来吊到半空中,它们将被安排在不同高度的空间(层),所以在房顶垂直往下看,有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是不存在的,就像FLASH动画中的不同层上安排了元素,但它们在看时不会有深度感觉)可见绝对定位的对象参考目标是它的父级,专业称之为包含块
(2)自私的相对定位(relative)相对定位一个最大特点是自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)再拿前边作比如来解,那么此时西瓜似乎是有魔法的,如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象水中有一个地方水凹下去了,周围的水不能填补它,西瓜看起来在旁边,如果搅动一下桶中的水,那个凹的位置会发现改变(文本流对相对定位对象还存在影响),但是凹处到西瓜出现的距离始终保持一致可见文本流与它之间还会互相影响,因为对象并没有真正脱离文本流,就像有两个人在同一层楼水平移动的过程中会有碰头的机会
(3)总结两种定位的特征绝对定位就像是把不同对象安排到了一-栋高楼的不同楼层(一般指不是笫一层,我们这里理解为文本流就放在首层),它们互不影响,但是它们怎么移动与你楼的地基和面积(父级)有关相对定位指对象还是在首层楼与文本流一起存放,它们之间肯定存在影响
(4)对特殊情况的补充在用相对定位和绝对定位的时候,有一种情况是它们的定位值用到了负值则对象可沿相反方向移动,刚才说到的把对象安排在一栋楼的不同层,如果某个对象一开始就是背靠着最外边墙的,此时再用一个负值定位它,它就会神奇般地跑出墙外去了,当然现实中可没有这种惊险而又神奇的事发生,本人只为了延用上面的比如作形象解释
(1)无定位设置,对象遵循HTML定位规则一般是子级不会跑出父级外边去(子级没有使用负边界情况),子级一般是靠在父级左上角的,父级放在最下层运行代码框[code]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//EN**/zhtmlxmlns=〃〃headmetahttp-equiv=Content-Type“content=,ztext/html;charset=gb2312,z/无定位设定,对象遵循HTML定位规则〈/title)styletype=text/css〃!—body{margin:0px;font-size:9pt;margin-top:150px;margin-left:150px;}.boxl{background-color:#33CCFF;height:200px;width:200px;}.box2{background-color:#66CC66;height:lOOpx;width:lOOpx;}―/style/headbodydivclass=boxldivclass=*box2*X/div/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(2)给设定了定位属性的对象指定leftrighttopbottom属性中的至少一个,不然定位不起作用下面实例中虽然给box2设定了定位属性position:absolute但是如果没有指定其中一个方位定位值top:Opx定位是不发生作用的,你可以删除我注释的样式再测试效果进行前后对比运行代码框!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//EN〃〃htmlxn】lns=〃〃headmetahttp-equiv=Content-Typecontent=,/text/html;charset=gb2312zz/给定位对象指定一个方位数值/titlestyletype=text/css〃!―body{margin:0px;font-size:9pt;margin-top:150px;margin-left:150px;}.boxl{background-color:#33CCFF;height:200px;width:200px;}.box2{background-color:#66CC66;height:lOOpx;width:lOOpx;position:absolute;top:Opx;/*如果没有指定一个方位定位属性和值,绝对定位不起作用,你可以删除这一项看一下效果*/}―/style/headbodydivclass=boxldivclassibox2〃X/div/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]3绝对定位对象可以层叠,层叠顺序用z-index控制,如果没有指定则遵循其父对象的定位方法就目前来说要做到不同浏览器正常浏览,最好不要给z-index指定负值,因为像FF这样标准的浏览器不支持负值,为了解释这一现象,下面实例中的最底层图片我用到了负值,所以会出现在TE中可以看到3幅图层叠,而转到FF中你就只能看到两幅图层叠了运行代码框[code]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitionai//ENz//,,zhtmlxndns=headmetahttp-equiv二〃Content-Type“content=text/html;charset=gb2312,//绝对定位对象可以层叠层叠顺序可用z-index控制但最好不要用负值,因为FF不支持/titlestyletype二〃text/css〃!-body{margin:0px;font-size:9pt;margin-top:150px;margin-1eft:150px;}.boxl{background-color:#33CCFF;height:200px;width:270px;background-image:url;background-repeat:no-repeat;background-position:centercenter;position:absolute;left:lOpx;top:lOpx;z-index:T;/*这里用了负值,在标准浏览器,如FF中是不能正常显示的*/}.box2{background-color:#66CC33;height:200px;width:270px;background-image:url;background-repeat:no-repeat;background-position:centercenter;position:absolute;left:50px;top:50px;}.box3{background-color:#996699;height:200px;width:270px;background-image:url;background-repeat:no-repeat;background-position:centercenter;position:absolute;left:lOOpx;top:lOOpx;}—/style/headbodydivclass二〃boxl〃X/divdivclass=box2X/divdivclass二〃box3〃X/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(4)相对定位对象会占据它原来位置,在下面实例中,没有设定相对定位前,绿色小盒子是在蓝色盒子左上角的,之前也设定了绿色小盒子的浮动方式为左浮动,可以看到文本环绕在它右边,但是后来用相对定位方法把绿色小盒子重定位到外面去了,它还占着自己原来位置,因为你还可以看到文本流没有发生自动填补流动因此这种直接的相对定位方法较少用,因为重定位对象后原来位置空了一块相对定位常与绝对定位结合用,一般是给父级设定相对定位方式,子级元素就可以相对它进行方便的绝对定位了(请注意看后面的实例)运行代码框[code]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//EN*,zhtmlxmlns=〃〃headmetahttp-equiv=Content-Typecontent=text/html;charset二gb2312”/〈title)相对定位对象会占据原有位置〈/titlestyletype=text/css〃!―body{margin:0px;font-size:9pt;line-height:12pt;margin-top:150px;margin-left:150px;}.boxl{background-color:#3CF;height:200px;width:200px;}.box2{background-color:#6C6;height:lOOpx;width:lOOpx;position:relative;float:left;top-120px;}―/style/headbodydivclass=z,boxr,divclass二〃box2〃X/div[相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中,并设定了浮动方式为左浮动,所以这些文字能环绕在它右边,当绿色小盒子用相对定位方法重定位到外边去了,文字还是不能流入它的区域,即左上角空白区域,那是因为绿色盒子还占用着它原来位置/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(5)相对定位的对象不可以重叠这一点也许比较难理解,先来这样理解吧,因为相对定位的对像没有脱离文本流,就像两个还是住在同一层楼的人,任何时候,他们脚下踩的地方不可能被另一个人踩着的,如果可以就意味着两个人共享一块地方了在下面的实例中,两个小盒子都刚好排在大盒子上方,所以在大盒子中输入的文字被挤到了下面上而两个盒子我再用相对定位的方法对调了它们的位置,当前它们下方的空间其实不是自己的,也正因为它们没有重叠,所以盒子上方还是有两个盒子占用的空间,下面文字无法向上流动(我已对盒子设定了浮动属性的了,如果不设定,即使有空间文本也不会往上流,上面盒子是块级元素,会独立占据一行)运行代码框[code]!DOCTYPEhtmlPUBLICZ,-//W3C//DTDXHTML
1.0Transitional〃ENhtmlxmlns=〃〃headmetahttp-equiv=Content-Typecontent=,/text/html;charset=gb2312z,/相对定位对象不可层叠/title)styletype=//text/css,,!—body{margin:0px;font-size:9pt;line-height:12pt;margin-top:150px;margin-left:150px;}.boxl{background-color:#33CCFF;height:200px;width:210px;padding:5px;}.box2{background-color:#66CC66;height:lOOpx;width:lOOpx;position:relative;float:left;left:lOOpx;}.box3(background-color:#CC99FF;height:lOOpx;width:lOOpx;position:relative;float:left;right:lOOpx;}—/style/headbodydivclass二〃boxl〃divclass二〃box2”我家在左边/divdivclass—box3〃我家在右边/div相对定位对象是在正常文本流中移动的,所以它的存在还是会影响文本流的布局,如果是绝对定位,这些文本应向上流入上方两个盒子的底部了/div/body/html[Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(6)高度自适应的妙用在下面实例中,右边的紫色小盒子高度是没有设定的,它的高度是随着里面内容的增加而增高的,但我们又可以通过绝对定位方法把它始终定位在父盒子的右上角同理,我们也可以只设定高度而让宽度自动随内容增加而变宽运行代码框[code]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//ENz/,z,/htmlxmlns=^headmetahttp-equiv二〃Content-Type“content=,,text/html;charset=gb2312z,/高度自适应的妙用〈/titlestyletype=text/css”!-body{margin:5px;font-size:9pt;}.boxl(background-color:S33CCFF;height:500px;width:500px;position:relative;}.box2{background-color:SCC99FF;width:lOOpx;position:absolute;right:3px;top:3px;text-align:center;line-height:15pt;}.box3{width:390px;height:500px;position:absolute;left:0px;top:0px;1ine-height:15pt;border-right:thindashed#999;}一/style/headbodydivclass=boxl〃divclass=box3〃右边的小盒子高度是没有设定的,它的高度是随着里面内容的增加而增高的,但我们又可以通过绝对定位把它始终定在父盒子的右上角/divdivclass二〃box2〃p蓝色理想br/经典论坛br/业界动态br/技术文档/p/div/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(7)给包含块一个高度,或者说给定位对象的父级设定一个高度不然也许显示的结果并不是你想要的在下面的例子中,如果你本意要实现下面效果把小盒子在父盒子中的左上角垂直往下偏移,上方留出一块区域,如果你删除了boxl的高度会怎么样呢?自己测试一下吧运行代码框[code]!DOCTYPEhtmlPUBLIC-〃W3C//DTDXHTML
1.0Transitional//EN,/htmlxmlns=headmetahttp-equiv=Content-Typecontent—text/html;charset=gb2312z,/〈title)给包含块一个高度〈/titlestyletype=text/css”!—body{margin:0px;font-size:9pt;line-height:12pt;margin-top:150px;margin-left:150px;).boxl{background-color:#33CCFF;width:200px;height:200px;/*如果不设定这个高度也许显示的结果并不是你想要的*/}.box2{background-color:#CC99FF;height:lOOpx;width:lOOpx;position:relative;bottom-100px;}―/style/headbodydivclass=/,boxl/,divclass=box2〃X/div/div/body/html[Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(8)放置绝对定位对像到可视区外会出现滚动条一般情况下,绝对定位是用来方便定位网页要看得见元素的,而不是拿它来隐藏对象的,一般隐藏对象常用到display与margin如果你试图把绝对定位的对象移出可视区域,嘿嘿,浏览器会为你准备滚动条去看望它运行代码框[code]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional//ENz/,/,zhtmlxmlns=〃〃headmetahttp-equiv二〃Content-Type“content=,,text/html;charset=gb2312z,/〈title〉放置绝对定位对像到可视区外会出现滚动条〈/titlestyletype=text/css〃!-body{margin:0px;font-size:9pt;line-height:12pt;}.box{background-color:#996699;height:200px;width:270px;background-image:url;background-repeat:no-repeat;background-position:centercenter;position:absolute;left:900px;top:0px;}.box2{height:200px;width:270px;border:Ipxdashed#996699;}--/style/headbodydivclass=〃box2〃这是右边对象原来所在的位置,即没有被赋予定位属性前的位置/divdivclass=,/box,/X/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]9放置相对定位对像到可视区外不会出现滚动条此现象很好理解,因为相对定位对象原来位置没有变,原来位置没有出去滚动条就不会出现在下面实例中,如果你缩小浏览器窗口,相对定位的对象还会出现完全消失的情况呢运行代码框[code]!DOCTYPEhtmlPUBLIC〃-〃W3C//DTDXHTML
1.0Transitional//EN,zz,,,htmlxmlns=〃”headmetahttp-equiv=//Content-Type/zcontent=text/html;charset=gb2312/z/放置相对定位对像到可视区外不会出现滚动条〈/titlestyletype=text/css〃!-body{margin:0px;font-size:9pt;1ine-height:13pt;}.box{background-color:#996699;height:200px;width:270px;background-image:url;background-repeat:no-repeat;background-position:centercenter;position:relative;left:900px;}.box2{height:200px;width:270px;position:absolute;border:Ipxdashed#996699;}—/stylc/hcadbodydivclass二〃box2〃虚线框是右边盒子原来的位置,即用了相对定位后,把对象重新定位到了右边,但对象的位置其实还在这里,或者说对象实际上并没有越出浏览器可视区域,所以不会出现滚动条br/我说过相对定位的的盒子原有位置是不会被占用的,但我为什么可以在这里写说明呢,这是因为我用了绝对定位,我只是为了方便说明才这样做的,请不要误解了/div〉〈divclass=〃box〃X/div/body/html[Ctrl+A全部选择提示你可先修改部分代码,再按运行]
(10)定位的特殊值情况如果定位设置是这样的position:relativcright:200pxleft:lOpx会出现什么情况呢?一边叫对象向右偏移lOpx另一边又叫对象向左偏移200px到底是听那边的呢还是那个先,那个后呢针对这种矛盾情况,CSS规定只听左边的left而右边怎么设置都被重定为-left即-left:right上下值top与bottom矛盾的话,就以top为准所以在下面的实例中你如何改变right的值,对象位置不会发生改变的运行代码框[code]!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML
1.0Transitional/ZENz,htmlxmlns=〃〃headmetahttp-equiv=z,Content-Typez,content=text/html;charset=gb2312”/〈title定位的特殊值情况/title〉styletype=text/css〃!--body{margin:0px;font-size:9pt;line-height:12pt;margin-top:150px;margin-left:150px;.boxlbackground-color:#33CCFF;width:200px;height:200px;}.box2{background-color:#CC99FF;height:lOOpx;width:lOOpx;position:relative;right:200px;/*此值总被认为是-left二TOpx所以你怎么改它都不会影响到布局*/left10px;/*这里设定了两个定位值,但是它们是矛盾的,所以此时将以左边为准,如果是上下类型错误,则以上边定位数值为准*/}一/style/hcadbodydivclass=boxldivclass=box2/div/div/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]
4.综合实例见证定位的魅力先看最终演示效果,具体教程请继续关注,本人正抽空整理运行代码框[code]!DOCTYPEhtmlPUBLIC〃-〃W3C//DTDXHTML
1.0Transitional//EN,z,z,/htmlxmlns=〃〃headmetahttp-equiv=*Content-Typez,content=z/text/html;charset=gb2312z,/title相对定位和绝对定位实例一作者唐国辉/titlestyletype=text/css〃!--*{margin:0px;padding:0px;}body{margin:lOpx;font-size:13px;}a:link{color:#666;text-decoration:none;/*去除链接下划线*/}a:visited{color:#666;text-decoration:none;}a:hover{color:#F90;}h3{color:#FFF;background-color:#F90;width:lOOpx;padding-top:3px;text-align:center;}ul{width:300px;border-top:Ipxsolid#F60;/*使其上边有一线条,与标题h3吻合*/}ulli{padding:5px;border-bottom:Ipxsolid#CCC;1ist-style:none;/*去除列表样式,这对于标准浏览很重要*/}a{position:relative;/*设置其定位方法为相对定位等一下内部信息面板就可以相对它定位*/display:block;/*让链接以块状呈现,这样不用点中链接文字就可以响应链接*/}adiv{display:none;/*初始化信息面板不显示*/}a:hover{background:#fff;}/*IE7以下版本A状态伪类bug*/a:hoverdiv{position:absolute;padding:5px;display:block;width:245px;/*只给出宽度高让它随内容多少自动调整*/left:150px;/*这是相对父级A的定位*/top:20px;border:Ipxsolidrgb91185233;background-color:rgb228246255;z-indcx:999;/*把信息面板提到一个较高的位置,使链接文字过长时不会与面板重叠,但这只对FF有效*/}aimg{width:80px;height:80px;border:none;/*去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框*/display:block;position:absolute;/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/top:5px;/*这里的5Px是与信息面板大盒子的填充一样的*/left:5px;}dl{width:160px;float:right;color:#999;line-height:20px;}dlddspanfont-weight:bold;color:#639;}-/style/headbodyh3最新单向/h3ulliahref=〃#〃01爱的文身黄圣依divimgsrc=*/net/UploadFiles_5419/200706/*alt=〃/dldd〈span歌名/span爱的文身/ddddXspan歌手:〈/span》黄圣依/dddd〈span介绍/span黄圣依唱片主打歌的确是她个人的内心写照,《爱的文身》由香港音乐大师金培达作曲,制作人陈少琪亲自填词/dd/dlX/divX/aX/liliahref=〃#〃》02累了阿信divimgsrc=/z/net/UploadFiles_5419/200706/z/alt=〃〃/dlddXspan歌名/span累了/ddddXspan歌手:/span阿信/dd〈ddXspan》介绍/span青春校园偶像剧【热情仲夏】片尾|ll|/dd/dl/divX/aX/1iliahref=#〃〉03漫漫慢慢阿朵divimgsrc=z,/net/UploadFiles_5419/200706/*alt=/dlddspan歌名/span漫漫慢慢/ddddXspan歌手:/span阿朵/ddddXspan介绍/span阿朵抢听版最新单曲《漫漫慢慢》让你认识阿朵柔情的一面,展现阿朵百变的风格/dd/dlX/div/aX/liQiXahref=〃#〃〉04我怀念的孙燕姿divimgsrc=zz/net/UploadFiles_5419/200706/z,alt=/dldd〉span歌名/span我怀念的/ddddXspan歌手/span孙燕姿/ddddXspan介绍/span令人感同身受的抒情歌,在故事性的架构中,有着平凡但又能扣人心弦的情感,是一首高度共鸣的抒情歌/dd/dlX/divX/aX/liliahref=〃#〃05听花期越来越近后弦divXimgsrc=z//net/UploadFilcs_5419/200706/,zalt=〃〃/dlddXspan歌名/span花期越来越近/ddddXspan歌手:/span后弦/dd〈ddXspanX绍/span后弦参与《花开的声音》这个舞台剧里的一部分,邀请了后弦去演唱这首歌,此歌就是为舞台剧《花开的声音》而创作/dd/dlX/divX/aX/li/ul/body/html[/code][Ctrl+A全部选择提示你可先修改部分代码,再按运行]。