z-index原理及适用范围

z-index原理及适用范围

原理

• z-index这个属性控制着元素在z轴上的表现形式，堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠1顺序越高，越靠近屏幕。

适用范围

<div class="divbox">
    <div class="abc">abc</div>
    <div class="def">def</div>
</div>

• 设置元素的position值为relative/absolute/fixed

.abc{
    background: red;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 999;
}
.def{
    background: green;
    width: 100px;
    height: 100px;
    margin-top: -30px;
    position: relative;
}  

• 当父元素设置display: flex | inline-flex时，子元素设置z-index

.divbox{
    display:flex;
}
.abc{
    background: red;
    width: 100px;
    height: 100px;
    z-index: 999;
}
.def{
    background: green;
    width: 100px;
    height: 100px;
    margin-left: -30px;
}