CSS绝对定位

CSS绝对定位详解

最新推荐文章于 2025-09-05 11:38:00 发布

转载最新推荐文章于 2025-09-05 11:38:00 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/435259

文章标签：

#xhtml #photoshop

当容器的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 id ="all" align ="center" >

      < 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>