Question

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

我提供了一个示例的JSFiddle，其中包含我正在使用的代码。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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?

希望有所帮助。

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

1 个答案: