欢迎访问: www.ptcms.cn
当容器的position属性值为absolute时，这个容器即被绝对定位了。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地将元素移动到你想要的位置。使用绝对定位的容器前面的或者后面的容器会认为这个层并不存在，即这个容器浮于其他容器上，它是独立出来的，类似于Photoshop软件中的图层。所以position:absolute用于将一个元素放到固定的位置非常方便。
当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似于Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。
— 注意：当容器都没有设置z-index属性值时，默认后面的靠后的容器z值大于前面的绝对定位的容器。
如果对容器设置了绝对定位，默认情况下，容器将紧挨着其父容器对象的左边和顶边，即父容器对象左上角。定位的方法为在CSS中设置容器的top（顶部）、bottom（底部）、left（左边）和right（右边）的值，这4个值的参照对象是浏览器的4条边。在D:\web\目录下创建网页文件（XHTML1.0），命名为pos_ab.htm，编写pos_ab.htm文件代码如代码11.20所示。
代码11.20 CSS绝对定位：pos_ab.htm
<!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">
*{margin: 0px;
padding:0px;}
#all{height:1200px;
width:500px;
margin-left:20px;
background-color:#eee;}
#fixed,#fixed2,#fixed3,#fixed4,#fixed5{width:120px;
height:50px;
border:5px double #000;
position:absolute;}
#fixed{top:10px;
left:10px;
background-color:#9c9;}
#fixed2{top:20px;
left:50px;
background-color:#9cc;}
#fixed3{bottom:10px;
left:50px;
background-color:#9cc;}
#fixed4{top:10px;
right:50px;
z-index:10;
background-color:#9cc;}
#fixed5{top:20px;
right:90px;
z-index:9;
background-color:#9c9;}
#a,#b,#c{width:300px;
height:100px;
border:1px solid #000;
background-color:#ccc;}
</style></head>
<body>
<div id="all">
<div id="fixed1">第1个固定的div容器</div>
<div id="fixed2">第2个固定的div容器</div>
<div id="fixed3">第3个固定的div容器</div>
<div id="fixed4">第4个固定的div容器</div>
<div id="fixed5">第5个固定的div容器</div>
<div id="a">第1个无定位的div容器</div>
<div id="b">第2个无定位的div容器</div>
<div id="c">第3个无定位的div容器</div>
</div>
</body>
</html>
/***********************************************************************/
讲解:
---------------------
笔者给外部div设置了#eee背景色，并给内部无定位的div设置了#ccc背景色，而绝对定位的div容器设置了#9c9和#9cc背景色，并设置了double类型的边框。在浏览器地址栏输入http://localhost/pos_ab.htm，浏览效果如图11.23所示。
图11.23 CSS绝对定位
从本例可看到，设置top、bottom、left和right其中至少一种属性后，5个绝对定位的div容器彻底摆脱了其父容器（id名称为all）的束缚，独立地漂浮在上面。而在未设置z-index属性值时，第2个绝对定位的容器显示在第1个绝对定位的容器上方（即后面的容器z-index属性值较大）。相应地，第5个绝对定位的容器虽然在第4个绝对定位的容器后面，但由于第4个绝对定位的容器的z-index值为10，第5个绝对定位的容器的z-index值为9，所以第4个绝对定位的容器显示在第5个绝对定位的容器的上方。
— 说明：读者可以随意拖动浏览器的窗口大小，观察绝对定位的div容器位置变化。