定位

相对定位

1. 设置
   • 给元素设置position:relative
   • 可以使用left,right,top,bottom四个属性调整位置
2. 参考点 参考点在中间原理的位置
3. 特点
   • 定位元素层级比普通元素高
   • left和right不能一起设置,top和bottom不能一起设置
   • 不推荐再设置浮动或margin

绝对定位

1. 设置
   • 给元素position:abolute即可实现绝对定位
   • 可以使用left,right,top,bottom四个属性调整位置
2. 参考点 参考包含块
   1. 对于没有脱离文档的元素,包含块就是父元素
   2. 对于脱离文档的元素:包含块是第一个拥有定位属性的祖先元素( 如果祖先元素都没有定位,那就是整个页面)
3. 特点
   1. 脱离文档流,会对后面的兄弟元素,父元素有影响
   2. left和right不能一起设置,top和bottom不能一起设置
   3. 绝对定位,浮动不能同时设置,如果 同时设置,浮动失效,以定位为主
   4. 不推荐再设置margin
   5. 无论什么元素设置绝对定位之后,都变成定位元素

固定定位

1. 设置
   • 给元素position:fixed即可实现绝对定位
   • 可以使用left,right,top,bottom四个属性调整位置
2. 参考点 参考视口 视口:浏览器显示的窗口
3. 特点
   1. 与绝对定位特点一样

粘性定位

1. 设置
   • 给元素position:sticky即可实现绝对定位
   • 可以使用left,right,top,bottom四个属性调整位置
2. 参考点 离他最近的一个拥有”滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先
3. 特点
   1. 不会脱离文档,它是一种专门用于窗口滚动时的新的定位方式
   2. 最常用的值是top值
   3. 粘性定位和浮动可以同时设置,但不推荐这样做
   4. 不推荐再设置margin

定位层级

1. 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的
2. 如果位置发生重叠，默认情况是后面的元素会显示在前面元素之上
3. 可以通过css属性z-index调整元素的显示层级
4. z-index的属性值是数字,没有单位,值越大显示的层级越高
5. 只有定位的元素设置z-index才生效
6. 只有z-index值大的元素,依旧没有覆盖掉z-index值小的元素,先检测其包含块的元素

特殊应用

让定位元素充满包含块

1. 块宽想与包含块一致,可以同时给定位元素设置left和right为0
2. 高度想与包含块一致,top和bottom设置为0

让定位元素在包含块中居中

1. 方案一

   1
   position: absolute;
   2
   left:0;
   3
   right:0;
   4
   top:0;
   5
   bottom:0;
   6
   margin:auto;

2. 方案二

   1
   left:50%
   2
   right:50%
   3
   margin-left:负的宽度的一般
   4
   margin-top:负的高度的一般