如何正确使用z-index处理遮罩层overlay与文本的层级关系

问题根因 #

z-index 仅对设置了非static定位（position值为relative/absolute/fixed/sticky任意一种）的元素生效。你为<p>标签设置了z-index但没有指定定位属性，所以该属性完全不生效，文本层级低于设置了position: absolute、z-index: 1的遮罩层，被遮罩覆盖后就会呈现暗淡效果。

解决方法（任选一种即可，更推荐方法1，兼容性更强，不受父元素层级设置影响） #

方法1：为文本元素添加定位属性激活z-index #

修改.mainArea p的CSS规则，新增position: relative即可：

.mainArea p {
    display: flex;
    height: 50vh;
    font-size: 1.5rem;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
    /* 新增下面这行，激活z-index生效 */
    position: relative;
    z-index: 999999 !important;
}

方法2：降低遮罩层层级 #

直接调整遮罩层的z-index为更低的数值（前提是父元素.mainArea没有额外设置z-index属性，你当前的代码符合该条件）：

.mainAreaOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    top: 0;
    left: 0;
    /* 调整z-index为小于文本层级的数值即可 */
    z-index: 0;
}

内容的提问来源于stack exchange，提问作者Hakan Gundogan