Question

嘿伙计们我的z-index存在一个小的堆叠顺序问题，关于SO的几个问题实际上处理了这个问题，但我无法解决这个问题，尽管在Z-index上阅读了一些深入的文章，像{ {3}}一个。

现在我面临的问题是我有以下CSS：

.grey-box {
    position: relative;
    padding: 50px 0;
    background: #eee;
    z-index: 9999999;
}

.grey-box:after {
    content: '';
    position: absolute;
    top: 100%;
    height: 30px;
    width: 30px;
    background: #eee;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    -webkit-transform: rotateZ(45deg); /* Safari */
        transform: rotateZ(45deg);
    z-index: 2;    
} 

.grey-box:before {
    content: '';
    position: absolute;
    top: 90%;
    height: 2px;
    width: 100%;
    background: red;
    /*left: 50%;
    margin-left: -15px;
    margin-top: -15px;*/
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,1);
    box-shadow: 2px 2px 5px rgba(0,0,0,1);
    z-index: -1;
}

我的问题是css没有使用html，所以如果你想看到整个问题，请参考这个this

现在您可以看到.grey-box是容器，我正在使用两个绝对定位的psudo元素。现在，尽管给.grey-box一个z-index: 9999999;的z索引它仍然显示在下面。grey-box:before和.grey-box:before的z索引为z-index: -1;。

如何解决此问题，如何在.grey-box上面.grey-box:before？

谢谢你。

亚历-Z

Answer 1

解决了您的问题，将容器上的z-index设置为自动

.grey-box {
    position: relative;
    padding: 50px 0;
    background: #eee;
    z-index: auto;
}

当伪元素的z-index为0或更大时，它将重新出现

fiddle

使用z-index堆叠顺序

1 个答案: