目录
1、什么是脱离文档流
2、position定位
-
static（默认定位）
-
relative（相对定位）
-
absolute（绝对定位）
-
fixed（固定定位）
-
sticky（粘性定位）
2.1 static定位
-
页面上的每个盒子从上到下、从左到右依次排列的布局
<div class="box-container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
2.2 relative定位
-
相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变
.box1 {
position: relative;
top: 50px;
left: 20px;
}
2.3 absolute定位
-
元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流
.box-container {
position: relative;
}
.box2 {
position: absolute;
top: 30px;
left: 25px;
}
2.4 fixed定位
-
相对于浏览器窗口进行定位，元素脱离文档流
2.5 sticky定位（存在兼容性问题）
-
根据自身原始位置或浏览器窗口进行固定定位，类似relative和fixed的结合
3、层级属性z-index
-
用于设置元素的堆叠顺序，该属性仅能在非static定位的定位元素上生效
-
数值越高，层级越高，层级高的元素会覆盖层级低的元素（层级高的元素会在层级低的元素上方）
.box1 { z-index: 1; }
.box2 { z-index: 0; }
💬题目01
💬题目02
💬题目03
💬题目04
