彻底弄懂CSS盒子模式之四 - 网页制作

　彻底弄懂CSS盒子模式之四

作者：webflash　时间： 2007-04-04　文档类型：原创　来自：蓝色理想

第 1 页绝对定位和相对定位 [1]
第 2 页绝对定位和相对定位 [2]
第 3 页绝对定位和相对定位 [3]

3．实例强化对定位属性的理解

（1）无定位设置，对象遵循HTML定位规则。一般是子级不会跑出父级外边去（子级没有使用负边界情况），子级一般是靠在父级左上角的，父级放在最下层。

（2）给设定了定位属性的对象指定left，right，top，bottom属性中的至少一个，不然定位不起作用。下面实例中虽然给box2设定了定位属性position: absolute，但是如果没有指定其中一个方位定位值top: 0px，定位是不发生作用的，你可以删除我注释的样式再测试效果进行前后对比。

（3）绝对定位对象可以层叠，层叠顺序用z-index控制，如果没有指定则遵循其父对象的定位方法，就目前来说要做到不同浏览器正常浏览，最好不要给z-index指定负值，因为像FF这样标准的浏览器不支持负值，为了解释这一现象，下面实例中的最底层图片我用到了负值，所以会出现在IE中可以看到3幅图层叠，而转到FF中你就只能看到两幅图层叠了。

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>绝对定位对象可以层叠,层叠顺序可用z-index控制,但最好不要用负值,因为FF不支持</title> <style type="text/css">  </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（4）相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相对定位对象会占据原有位置</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box2"></div> [相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。</div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（5）相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，如果可以就意味着两个人共享一块地方了。在下面的实例中，两个小盒子都刚好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方还是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，如果不设定，即使有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相对定位对象不可层叠</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box2">我家在左边</div> <div class="box3">我家在右边</div> 相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局，如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。 </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（6）高度自适应的妙用。在下面实例中，右边的紫色小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但我们又可以通过绝对定位方法把它始终定位在父盒子的右上角。同理，我们也可以只设定高度而让宽度自动随内容增加而变宽。

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>高度自适应的妙用</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box3">右边的小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但我们又可以通过绝对定位把它始终定在父盒子的右上角。</div> <div class="box2"> <p>蓝色理想<br /> 经典论坛<br /> 业界动态<br /> 技术文档 </p> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

出处：蓝色理想
责任编辑：moby

上一页绝对定位和相对定位 [1] 下一页绝对定位和相对定位 [3]

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

彻底弄懂CSS盒子模式之五

作者文章

彻底弄懂CSS盒子模式之一

站点最新

站点最新列表

疯狂的程序员第五十回

疯狂的程序员第四十九回

疯狂的程序员第四十八回

疯狂的程序员第四十七回

疯狂的程序员第四十六回

疯狂的程序员第四十五回

疯狂的程序员第四十四回

疯狂的程序员第四十三回

疯狂的程序员第四十二回

疯狂的程序员第四十一回

栏目最新

栏目最新列表

火星人的耳机

公司正式宣布创业失败

用corelDEAW 12打造唇膏

二行代码解决全部网页木马

一行代码解决iframe挂马

Photoshop制作星空爆炸效果

CorelDraw 12打造休闲裤

Firework如何画特殊的切角图形

Firework打造韩式风格的手提袋

flash实例:打造佛光效果