CSS绝对定位方法实例

最新推荐文章于 2022-10-15 09:28:39 发布

aidejieti

最新推荐文章于 2022-10-15 09:28:39 发布

阅读量168

点赞数

分类专栏： div+css 文章标签： CSS 浏览器 XHTML HTML Web

本文链接：https://blog.csdn.net/aidejieti/article/details/83324624

版权

div+css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

欢迎访问: 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">

<head>

<title>无标题文档</title>

*{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="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容器位置变化。

aidejieti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS绝对定位方法实例

欢迎访问: www.ptcms.cn当容器的position属性值为absolute时，这个容器即被绝对定位了。绝对定位在几种定位方法中使用最广泛，这种方法能够很精确地将元素移动到你想要的位置。使用绝对定位的容器前面的或者后面的容器会认为这个层并不存在，即这个容器浮于其他容器上，它是独立出来的，类似于Photoshop软件中的图层。所以position:absolute用于将一个元素放到固定的位置...
复制链接

扫一扫

专栏目录