使用 z-index 的堆叠顺序答案

【问题标题】：stacking order with z-index使用 z-index 的堆叠顺序
【发布时间】：2015-06-25 09:22:17
【问题描述】：

嘿，伙计们，我在 z-index 上遇到了一个小的堆叠顺序问题，关于 SO 的一些问题实际上解决了这个问题，但是尽管阅读了一些关于 Z-index 的深入文章，但我无法解决这个问题，比如 @ 987654321@一。

现在我面临的问题是我有以下 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 ，所以如果你想看到整个问题的实际效果，请参考fiddle.

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

我该如何解决这个问题，我如何在.grey-box:before 之上创建.grey-box ？？

谢谢。

亚历克斯-z

【问题讨论】：

你想在哪里显示这个 .grey-box
从父级移除 z-index ? jsfiddle.net/undmcszz/1位置：相对；将其堆叠在静态元素之上，而不需要 z-index :)
也许这就是你想要的？ cssarrowplease.com
@GCyrillus ，我希望红线低于 .grey-box 。红线显示在它下面，根本不可见！
既然说到了影子，你的目的就很清楚了。你可以自己解释一下你对 z-index 的理解，自己做个回答，收集点;)

标签： html css

【解决方案1】：

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

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

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

fiddle

【讨论】：