特点：
1.开启了绝对定位，不设置偏移量则元素不发生移动
2.元素从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
包含块：就是当前元素最近的祖先块元素
绝对定位的包含块：离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位的元素，则相对于根元素进行定位，根元素就是他的包含块，HTML就是初始包含块
<!DOCTYPE html> <html lang="en"> <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>Document</title> <style> .box1,.box2,.box3 { width: 100px; height: 100px; } .box1 { background-color: aqua; } .box2 { background-color: rgb(206, 31, 31); position: absolute; top: 0; left: 0; } .box3 { background-color: chartreuse; } .box4{ width: 400px; height: 400px; background-color: chartreuse; /* position: relative; */ } .box5 { width: 300px; height: 300px; background-color: cornflowerblue; /* position: relative; */ } </style> </head> <body> <div class="box1">1</div> <div class="box4"> <p>4</p> <div class="box5"> <p>5</p> <div class="box2">2</div> </div> </div> <div class="box3">3</div> </body> </html>
原文：https://www.cnblogs.com/strugglingbo/p/14418602.html