CSS绝对定位-白红宇

原创作品，允许转载，转载时请务必以超链接形式标明文章、作者信息和本声明。否则将追究法律责任。

当容器的position属性值为absolute时，这个容器即被绝对定位了。使用绝对定位的容器，会脱离文档流。

当有多个绝对定位容器放在同一个位置时，显示哪个容器的内容呢？类似Photoshop的图层有上下关系，绝对定位的容器也有上下的关系，在同一个位置只会显示最上面的容器。在计算机显示中把垂直于显示屏幕平面的方向称为z方向，CSS绝对定位的容器的z-index属性对应这个方向，z-index属性的值越大，容器越靠上。即同一个位置上的2个绝对定位的容器只会显示z-index属性值较大的。

如果容器设置了绝对定位，但是其父容器没有设置position 属性，绝对定位的容器会一直往上查找，直到找到具有position属性的容器。如果没有设置不到定位的父亲容器，以浏览器窗口为定位参考点。

!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;}

body{

margin:20px;

}

#all{height:1200px;

width:500px;

/* position:absolute;*/

margin-left:20px;

margin:20px;

background-color:#eee;}

#fixed1,#fixed2,#fixed3,#fixed4,#fixed5{width:120px;

height:50px;

border:5px double #000;

position:absolute;}

#fixed1{top:0px;

left:0px;

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:15;

background-color:#9c9;}

#a,#b,#c{width:300px;

height:100px;

border:1px solid #000;

background-color:#ccc;}

</style>

</head>

body

div

="all"

align

="center"

div

="fixed1"

>第1个固定的div容器

</div>

div

="fixed2"

>第2个固定的div容器

</div>

div

="fixed3"

>第3个固定的div容器

</div>

div

="fixed4"

>第4个固定的div容器

</div>

div

="fixed5"

>第5个固定的div容器

</div>

div

="a"

>第1个无定位的div容器

</div>

div

="b"

>第2个无定位的div容器

</div>

div

="c"

>第3个无定位的div容器

</div>

</body>

</html>

然后，我在all 的css中设置了postition 属性，这样子容器，就乖乖的放在all div 下了。效果如下：

本文出自 “” 博客，请务必保留此出处