CSS定位与层级

CSS定位

CSS通过定位属性可以将元素摆放到页面的任意位置。
属性名：position
属性值：
static 默认值，元素是静止的没有开启定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位

相对定位relative

• 开启元素的相对定位以后，如果不设置偏移量元素不会发生任何变化
• 偏移量中的定位位置/参照物：元素在文档流中的原位置
• 相对定位不会元素脱离文档流，不会改变元素的性质（行内/块元素）
• 相对定位会提升元素的层级

绝对定位absolute

• 开启元素的绝对定位以后，如果不设置偏移量元素位置不会发生任何变化
• 偏移量中的定位位置/参照物：元素的包含块–离元素最近的开启了定位(非static)的祖先元素，如果所有的祖先元素都没有开启定位，则以根元素为它的包含块/定位位置
• 绝对定位会使元素从文档流中脱离，会改变元素的性质(行内元素变成块元素)
• 绝对定位会提升元素的层级

注意：在元素开启绝对定位后，在之前盒模型中的等式需要添加left/right/top/bottom值，即：
水平方向布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的宽度
垂直方向布局
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度
可设置auto的值：margin width left( right top bottom
当发生过度约束，如果9个值中没有auto，则自动调整right/bottom值以使等式满足；因此，前期盒模型设置的水平居中margin:0 auto无效了
如果需要使水平居中，需要设置left:0; right:0; margin:0 auto;
如果需要使垂直居中，需要设置top:0; bottom:0; mating:auto 0;

固定定位fixed

• 固定定位也是一种绝对定位
• 不同之处在于固定定位永远参照于浏览器的视口进行定位，不会随网页的滚动条滚动

粘滞定位sticky

• 粘滞定位也是一种相对定位
• 不同之处在于粘滞定位可以在到达某个位置时将元素固定

Z-index层级

1. 对于开启了定位的元素，可以通过z-index属性来指定元素的层级，改变定位元素的覆盖顺序
2. z-index取值为正数，数值越大层级越高，越显示在上面
3. 如果元素的层级相同，则优先显示位置靠下的元素
4. 祖先元素的层级再高也不会盖住后代元素