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

Question

我遇到了 z-index 堆叠问题。下面的 div 出现在顶部 div 的顶部，即使 z-index 和位置声明下面的 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 值。

第四个值是opacity参数，这里opacity设置为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?

希望对您有所帮助。