css - 使用负边距时 z-index 不起作用

Question

我遇到了 z-index 堆叠问题。下面的 div 出现在顶部 div 的顶部，即使 z-index 和 positions 声明下面的 div 应该在它上面的 div 之下。

我已经使用我正在使用的代码提供了一个示例的 JSFiddle。

https://jsfiddle.net/6hewonhb/

.above-box {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgba(251, 47, 111, 0.2);
    color: #fff;
    z-index: 10 !important;
    position: relative !important;
    margin-top: 0px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    height: 100px;
    width: 100px;
}

.below-box {
    margin-top: -20px !important;
    margin-left: 70px !important;
    position: relative !important;
    z-index: 5 !important;
    background-color: #f00;
    height: 100px;
    width: 100px;
}

<div class="above-box">
    TEST
</div>

<div class="below-box">
    TEST
</div>

Answer 1

它确实有效。请注意 .above-box div 的 RGBA 值。

第四个值是不透明度参数，这里不透明度设置为1:

background:rgba(251,47,111,1);

See this fiddle

此外，不需要在 CSS 代码的几乎所有地方添加 !important;。

编辑:对于您的问题，请在添加 z-index 属性之前仔细检查每个元素在 DOM 中的位置。z-index 属性适用于 DOM 文档中同一级别的元素。

Like this example

此外，您可以在这篇文章中阅读对 z-index 的非常好的解释: Z-Index Relative or Absolute?

希望对您有所帮助。