CSS定位position的层级关系问题

目录

前言

一、position是什么？

二、position属性

1.静态定位(static)

2.绝对定位（absolute）

3.相对定位（relative）

4.固定定位（fixed）

三、层级关系

示例：​

总结

---

前言

CSS属性一共有x、y、z三条轴，但z轴只有使用了position属性时，z轴上的层级关系才体现出来，所以z-index这个属性只有定位元素才有。

---

一、position是什么？

position 属性规定元素的定位类型。

二、position属性

1.静态定位(static)

        一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。

2.绝对定位（absolute）

        绝对定位的元素从文档流中拖出，用left、right、top、bottom等属性进行绝对定位，如果元素的父级没有设置定位属性，则依据 body 元素作为参考进行定位。绝对定位元素可层叠，层叠顺序通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。

3.相对定位（relative）

        已自身为为参考物，相对于自己的原位置进行定位。相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

4.固定定位（fixed）

        相对于浏览器窗口进行定位，让元素并不会随滚动条滚动而发生变化。

三、层级关系

        z-index该属性可以设置元素的堆叠顺序，拥有更大值堆叠顺序的元素总是会处于堆叠顺序较小的元素的前面，允许使用负值。​

特点：

• 只能加给定位元素
• 数值越大层级越高，可以接受负数
• 建议同级元素之间比较层级

示例：​

---

        当没有设置z-index时，下面的div盒子遮住了上面的div盒子，这时我们给上面的元素增加一个z-index属性。

​    

​ 

        可以看到当给z-index设置了较大的值后，上面的div盒子不再被下面的盒子遮住。

总结

        欢迎各位来看我的博客，点赞评论必回！