绝对定位有很多特点跟相对定位不一样,比如说这个开启绝对定位会脱离文档流;定位原点(top:0;left:0)是相对于包含块,而不是本身原来的位置
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
div {
font-size:70px;
}
.box1, .box2, .box3 {
width: 200px;
height: 200px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: orange;
position: absolute;
left: 0;
top: 0;
}
.box3 {
background-color: #bfa;
}
/*
绝对定位:
- 当元素的position值设置为:absolute时候,则开启了元素的绝对定位
- 绝对定位的特点:
1.开启绝对定位后,如果不设置偏移量,元素的位置不会发生变化
2.开启绝对定位后,元素会从文档流中脱离
3.绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
包含快( containing block )
- 正常情况下:
包含块就是离当前元素最近的祖先元素
<div><div></div></div> 此时里面的div包含块就是外面这个div
<div><span><em>hello</em></span></div> 此时em的包含块是div,因为span不是块元素
- 绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素
如果所有祖先元素都没有开启定位,则相对于根元素进行定位
- html (根元素、初始包含块)
*/
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3" style="height: 10000px;">3</div>
</body>
</html>