CSS 绝对定位

最新推荐文章于 2025-07-18 14:16:18 发布

原创最新推荐文章于 2025-07-18 14:16:18 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css学习专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了CSS中的相对定位与绝对定位的区别及应用技巧，通过实例展示了如何利用这两种定位方式实现网页元素的精确布局。

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

ps:如果不存在已定位的祖先元素，设置绝对定位的元素就会一层层往上找直到包含他的父块，直至“相对于”最初的包含块。

<html>
<head>
<style type="text/css">
div,h2{margin:0px;padding:0px;}
h2.pos_abs
{
background:#f4e909;
display:block;
width:300px;
height:200px;

position:absolute;

left:100px;
top:100px;
}
.pos_a{ background:#0181c8;
width:400px;
height:350px;
}
.pos_b{ background:#bf0101;
width:500px;
height:500px;
}
</style>
</head>
<body>
<div class="pos_b">
<div class="pos_a">
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</div>
</div>
</body>
</html>

当他的包含块已经定位了之后，position作用的相对应的块就是已经设置的父块。

<html>
<head>
<style type="text/css">
div,h2{margin:0px;padding:0px;}
h2.pos_abs
{
background:#f4e909;
display:block;
width:300px;
height:200px;
position:absolute;
left:100px;
top:100px;
}
.pos_a{ background:#0181c8;
width:400px;
height:350px;
position:absolute;
top:30px;
left:20px;

}
.pos_b{ background:#bf0101;
width:500px;
height:500px;
}
</style>
</head>
<body>
<div class="pos_b">
<div class="pos_a">
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</div>
</div>
</body>

</html>