html - 伪元素在彩色背景 div 顶部不可见

Question

我想渲染照片堆栈。我使用了一个带有前后伪元素的 div。这很好用。唯一需要注意的是:这个 div 应该呈现在一些单色背景之上。所以我将这个 div 放在另一个设置了背景颜色的 div 中。现在，伪元素不再可见。出了什么问题？

这是 HTML:

<div id="main">
 <div class="gallery-stackone"></div>
</div>

这里是 CSS:

#main {
background-color: green;
border: 1px solid blue;
width: 100%;
height: 300px;
}

.gallery-stackone {
  margin: 0; padding: 0;
    background: red;
    border: 6px solid #fff;
    float: left;
    height: 200px; width: 200px;
    margin: 50px;
    position: relative;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    border: 6px solid #fff;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.gallery-stackone:before {
    content: "";
    height: 200px; width: 200px;
    background: #eff4de;
    border: 6px solid #fff;

    position: absolute;
    z-index: -1;
    top: 0px;
    left: -10px;

    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

.gallery-stackone:after {
    content: "";
    height: 200px; width: 200px;
    background: #768590;
    border: 6px solid #fff;
    position: absolute;
    z-index: -1;
    top: 5px;
    left: 0px;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

这里是对应的fiddle

Answer 1

检查fiddle

我已经将 CSS 更改如下

#main {
    background-color: green;
    border: 1px solid blue;
    width: 100%;
    height: 300px;
    position:relative;
    z-index: -2;    
}

我给了一个 z-index值为 -2，因为你已经给出了 z-index:-1对于 .gallery-stackone:after为了使 z-index 正常工作，我还添加了一个 position:relative到 div..