您的位置：首页 > Web前端 > HTML5

H5杂记之绝对定位 position:absolute;

2016-08-21 16:29 357 查看

position:absolute;

绝对定位，是相对于最近的一次定位（绝对定位，相对定位，和固定定位都可以，只要是定位都可以，float不行，margin不行）的祖先（父辈及以上）元素（与父辈同级的元素无效）。不是相对于浏览器，也不是相对于父元素。如果找不到符合条件的，则是相对于 body元素进行定位。

并且设置之后，其本身的文档流会删除，等于消失了一样。

fixed是相对于浏览器定位。

relative是相对于原位置定位，其仍然占据原位置。只是表现的位置不一样了。

<html>
<head>
<style type="text/css">

*{
padding:0px;
margin:0px;}
h2.pos_abs
{
position:absolute;
left:0px;
top:0px
}

div.d1{
width:100px;
height:100px;
background-color: aquamarine;

position: absolute;
left:20px;
}
div.d2{
width:50px;
height:50px;
background-color: chartreuse;

}

div.d3{
width:50px;
height:50px;
background-color: red;

/*  position: absolute;
left:50px;
这块注释取消 会看到 绝对定位 不是相对于 叔辈元素，而且会绝对定位会删除原本占据的位置。
*/
}
</style>
</head>

<body>

<div class="d1">
<div class="d3">

</div>
<div class="d2">
<h2 class="pos_abs">aaaaaaaaaa</h2>
</div >

</div>

</body>

</html>

aaaaaa包含在 d2中，d2是绿色，无绝对定位。位置处在d3 红色之下。

d1进行了绝对定位。

但是aaaa出现的位置是与d1相关的。而不是与包着着它的d2中。

注释里的内容也是知识点，需要看一下

代码效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html5 div布局

相关文章推荐

新的分享

章节导航

H5杂记之 绝对定位 position:absolute;

H5杂记之绝对定位 position:absolute;