绝对定位中关于z-index的深入探索

层级问题描述

若只给一个元素添加定位,而其余元素没有定位,则定位元素会遮盖住没有定位的元素；但若所有的元素都添加了定位的话,默认的是后面的遮盖住前面的效果。

【问】如果不想让后面的定位元素遮盖前面的元素，怎么解决

• 使用对象的层叠顺序属性z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index属性说明

• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。

• 如果为正数，则离用户更近，为负数则表示离用户更远。

• 取值

  属性值	解释
  auto	默认。堆叠顺序与父元素相等
  number	设置元素的堆叠顺序
  inherit	规定应该从父元素继承 z-index 属性的值

• 元素可拥有负的 z-index 属性值

• z-index 仅能在已定位的元素上设置

• 没有单位，数值越大，层级越高

父子盒子中绝对定位对z-index的影响

<!-- html部分 -->
<div class="father">
        father
        <div class="child">child</div>
</div>

/* css部分 */
.father{
    width: 200px;
    height: 200px;
    background: darkgreen;
    margin-bottom: 50px;
    /* 此时设置该属性没有作用，若想要父盒子覆盖在子盒子之上，则在子盒子中设置！ */
    z-index: 1; 

    /* 使得子盒子以父盒子为参照 */
    /* position: relative;  */
        }

.child{
    width: 100px;
    height: 100px;
    background: salmon;
    top: 20px;
    left: 20px;

    /* 子盒子需要使用绝对定位才能设置z-index! */
    /* position: absolute;   */
    /* 此时子盒子被覆盖 */
    /* z-index: -1;  */
}

原因： 使用static 定位或无position定位的元素以及浮动的元素，设置z-index属性是无效的。

【扩展】我在浏览器中查询到的提示信息是这样的：
The position: static property prevents z-index from having an effect.
Try setting position to something other than static.
翻译过来就是：
这个位置：静态属性可防止 z-index 产生的影响。尝试将这个位置设置为静态以外的其他位置。

兄弟盒子中绝对定位对z-index的影响

<!-- html部分 -->
<div class="box1">box1</div>
<div class="box2">box2</div>

/* css部分 */
.box1{
    width: 200px;
    height: 200px;
    background: salmon;
    position: absolute;
    top:250px;
    left: 100px;
}
.box2{
    width: 200px;
    height: 200px;
    background: rgb(162, 20, 228);
    margin-bottom: 500px;
    position: absolute;
    top: 400px;
    /* 后来者居上，此时box2在box1上面 */
    left: 0px; 
    /* 设置box2在box1后面 */
    z-index: -1; 
}