1、绝对定位概述
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
（1）从文档流中删除，原来占用的空间释放
（2）绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
2、效果演示
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-定位-绝对定位</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
width : 800px;
background: gray;
position : relative;
margin : 0px auto;
}
.div1{
border: 1px;
background: blue;
height: 100px;
}
.div2{
width: 700px;
background: red;
height: 100px;
position: absolute;
top : 20px;
left : 0px;
}
.div3{
background: green;
height: 100px;
}
</style>
</head>
<body>
<div style="height: 100px"></div>
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
运行效果：
因为wrap样式的div是相对布局，因此wrap是div2已定位的父元素。
因为绝对定位从文档流中删除，因此绿色div3向上移动。
image.png
如果wrap删除 ** position : relative;**样式，运行结果如下，因为div2的没有找到已定位的父元素，所以div相对最初包含块进行偏移。
image.png
网友评论