1CSS相对定位方法实例:
当容器的position属性值为relative时，这个容器即被相对定位了。相对定位和其他定位相似，也是独立出来浮在上面。不过相对定位的容器的top（顶部）、bottom（底部）、left（左边）和right（右边）属性参照对象是其父容器的4条边（可认为是自身本应在的位置） ，而不是浏览器窗口，并且相对定位的容器浮上来后，其所占的位置仍然留有空位，后面的无定位容器仍然不会“挤”上来。在D:/web/目录下创建网页文件（XHTML1.0），命名为pos_rel.htm，编写pos_rel.htm文件代码如代码11.22所示。
Www.Svn8.Com
代码11.22 CSS相对定位：pos_rel.htm Svn中文网
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
参考资料:www.svn8.com
<html xmlns=”http://www.w3.org/1999/xhtml”> 参考资料:www.svn8.com
<head>
Svn8.Com
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> 参考资料:www.svn8.com
<title>CSS相对定位</title>
Svn8.Com
<style type=”text/css”>
Svn中文网
*{margin: 0px; 参考资料:www.svn8.com
padding:0px;}
Www.Svn8.Com
#all{width:400px;
参考资料:www.svn8.com
height:400px; Bbs.Svn8.Com
background-color:#ccc;} Svn8.Com
#fixed{width:100px;
Svn8.Com
height:80px; 参考资料:www.svn8.com
border:15px ridge #f00; Svn8.Com
background-color:#9c9;
Bbs.Svn8.Com
position:relative; Svn中文网
top:20px; Svn8.Com
left:20px;}
参考资料:www.svn8.com
#a,#b{width:200px;
Svn中文网
height:120px; Bbs.Svn8.Com
background-color:#eee;
Svn中文网
border:2px outset #000;} Svn8.Com
</style></head>
Svn中文网
<body>
Svn8.Com
<div id=”all”>
参考资料:www.svn8.com
<div id=”a”>第1个无定位的div容器</div> Bbs.Svn8.Com
<div id=”fixed”>相对定位的容器</div>
参考资料:www.svn8.com
<div id=”b”>第2个无定位的div容器</div> Svn中文网
</div>
参考资料:www.svn8.com
</body>
Svn8.Com
</html>
参考资料:www.svn8.com
笔者给外部div设置了#ccc背景色，并给内部无定位的div设置了#eee背景色，而相对定位的div容器设置了#9c9背景色，并设置了inset类型的边框。在浏览器地址栏输入http://localhost/pos_相对.htm，浏览效果如图11.25所示。
Svn8.Com
参考资料:www.svn8.com
图11.25 CSS相对定位
Www.Svn8.Com
相对定位的容器其实并未完全独立，浮动范围仍然在父容器内，并且其所占的空白位置仍然有效地存在于前后两个容器之间。
Www.Svn8.Com
CSS固定定位方法实例 Bbs.Svn8.Com
当容器的position属性值为fixed时，这个容器即被固定定位了。固定定位和绝对定位非常类似，不过被定位的容器不会随着滚动条的拖动而变化位置。在视野中，固定定位的容器的位置是不会改变的。在D:/web/目录下创建网页文件（XHTML1.0），命名为pos_fix.htm，编写pos_fix.htm文件代码如代码11.21所示。
参考资料:www.svn8.com
代码11.21 CSS固定定位：pos_fix.htm
Bbs.Svn8.Com
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Svn8.Com
<html xmlns=”http://www.w3.org/1999/xhtml”> Bbs.Svn8.Com
<head>
参考资料:www.svn8.com
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> Www.Svn8.Com
<title>CSS固定定位</title> Www.Svn8.Com
<style type=”text/css”>
Svn中文网
*{margin: 0px; Www.Svn8.Com
padding:0px;} 参考资料:www.svn8.com
#all{width:400px;
Svn8.Com
height:1200px; Svn8.Com
background-color:#ccc;} Bbs.Svn8.Com
#fixed{width:100px;
参考资料:www.svn8.com
height:80px;
Bbs.Svn8.Com
border:15px outset #f00;
Svn8.Com
background-color:#9c9; Svn中文网
position:fixed; Svn中文网
top:20px;
Www.Svn8.Com
left:10px;}
Svn中文网
#a{width:200px; Bbs.Svn8.Com
height:300px; Svn8.Com
margin-left:20px; Www.Svn8.Com
background-color:#eee; Bbs.Svn8.Com
border:2px outset #000;}
Svn中文网
</style></head> Svn中文网
<body> Svn8.Com
<div id=”all”>
Bbs.Svn8.Com
<div id=”fixed”>固定的容器</div> Bbs.Svn8.Com
<div id=”a”>无定位的div容器</div>
Svn中文网
</div> Www.Svn8.Com
</body>
参考资料:www.svn8.com
</html> Svn8.Com
笔者给外部div设置了#ccc背景色，并给内部无定位的div设置了#eee背景色，而固定定位的div容器设置了#9c9背景色，并设置了outset类型的边框。在浏览器地址栏输入http://localhost/pos_fix.htm，浏览效果如图11.24所示。
参考资料:www.svn8.com
读者可以尝试拖动浏览器的垂直滚动条，固定容器不会有任何位置改变。不过IE6.0版本的浏览器不支持fixed值的position属性，所以网上类似的效果都是采用JavaScript脚本编程完成的。
Svn8.Com
Svn中文网
图11.24 CSS固定定位 参考资料:www.svn8.com
CSS绝对定位方法实例
Www.Svn8.Com
当容器的position属性值为absolute时，这个容器即被绝对定位了。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地将元素移动到你想要的位置。使用绝对定位的容器前面的或者后面的容器会认为这个层并不存在，即这个容器浮于其他容器上，它是独立出来的，类似于Photoshop软件中的图层。所以position:absolute用于将一个元素放到固定的位置非常方便。 参考资料:www.svn8.com
当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似于Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。
Bbs.Svn8.Com
— 注意：当容器都没有设置z-index属性值时，默认后面的靠后的容器z值大于前面的绝对定位的容器。 参考资料:www.svn8.com
如果对容器设置了绝对定位，默认情况下，容器将紧挨着其父容器对象的左边和顶边，即父容器对象左上角。定位的方法为在CSS中设置容器的top（顶部）、bottom（底部）、left（左边）和right（右边）的值，这4个值的参照对象是浏览器的4条边。在D:/web/目录下创建网页文件（XHTML1.0），命名为pos_ab.htm，编写pos_ab.htm文件代码如代码11.20所示。 参考资料:www.svn8.com
代码11.20 CSS绝对定位：pos_ab.htm Svn8.Com
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Bbs.Svn8.Com
<html xmlns=”http://www.w3.org/1999/xhtml”> Svn8.Com
<head>
Svn8.Com
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> Svn8.Com
<title>无标题文档</title>
Svn8.Com
<style type=”text/css”>
Svn8.Com
*{margin: 0px;
Svn8.Com
padding:0px;}
Bbs.Svn8.Com
#all{height:1200px; Www.Svn8.Com
width:500px; 参考资料:www.svn8.com
margin-left:20px; Svn中文网
background-color:#eee;} Svn中文网
#fixed,#fixed2,#fixed3,#fixed4,#fixed5{width:120px; 参考资料:www.svn8.com
height:50px; Www.Svn8.Com
border:5px double #000; Www.Svn8.Com
position:absolute;} Www.Svn8.Com
#fixed{top:10px;
Svn中文网
left:10px;
参考资料:www.svn8.com
background-color:#9c9;}
Svn中文网
#fixed2{top:20px; Www.Svn8.Com
left:50px; Bbs.Svn8.Com
background-color:#9cc;}
Svn中文网
#fixed3{bottom:10px; Svn中文网
left:50px; Bbs.Svn8.Com
background-color:#9cc;} Svn中文网
#fixed4{top:10px;
Svn8.Com
right:50px;
Svn中文网
z-index:10; Bbs.Svn8.Com
background-color:#9cc;}
Www.Svn8.Com
#fixed5{top:20px; Www.Svn8.Com
right:90px;
Bbs.Svn8.Com
z-index:9;
Svn8.Com
background-color:#9c9;}
Svn8.Com
#a,#b,#c{width:300px; Bbs.Svn8.Com
height:100px; 参考资料:www.svn8.com
border:1px solid #000; Bbs.Svn8.Com
background-color:#ccc;}
Www.Svn8.Com
</style></head>
Svn8.Com
<body> 参考资料:www.svn8.com
<div id=”all”>
Www.Svn8.Com
<div id=”fixed1″>第1个固定的div容器</div> Bbs.Svn8.Com
<div id=”fixed2″>第2个固定的div容器</div>
Bbs.Svn8.Com
<div id=”fixed3″>第3个固定的div容器</div> Svn8.Com
<div id=”fixed4″>第4个固定的div容器</div>
Bbs.Svn8.Com
<div id=”fixed5″>第5个固定的div容器</div> Bbs.Svn8.Com
<div id=”a”>第1个无定位的div容器</div> Svn8.Com
<div id=”b”>第2个无定位的div容器</div>
Www.Svn8.Com
<div id=”c”>第3个无定位的div容器</div>
Www.Svn8.Com
</div> Svn8.Com
</body> Bbs.Svn8.Com
</html> Www.Svn8.Com
笔者给外部div设置了#eee背景色，并给内部无定位的div设置了#ccc背景色，而绝对定位的div容器设置了#9c9和#9cc背景色，并设置了double类型的边框。在浏览器地址栏输入http://localhost/pos_ab.htm，浏览效果如图11.23所示。 Svn中文网
图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个绝对定位的容器的上方。 参考资料:www.svn8.com
— 说明：读者可以随意拖动浏览器的窗口大小，观察绝对定位的div容器位置变化。
