css - 使用 :before 堆叠 z-index 问题

Question

为了现场演示，我在这里设置了 fiddle

http://jsfiddle.net/OwenMelbz/3PQHa/

基本上我正在尝试创建一堆 2 张“照片”- 使用纯 CSS，目前无法触及标记，但它已经完成了 99%，只是一个堆叠问题。

我正在使用 :before 尝试将流中的元素放在我的 div 之前并稍微旋转它，但它的索引出现在我的元素之上。

fiddle 显示了这一点——我希望红色方 block 位于白色方 block 的后面

标记在现场，但如果您想快速查看，请在此处查看。

<div class="thumbnail-frame">
    <img src="http://placehold.it/420x420" alt="gallery test">
    <div class="details">
        <small>10/06/13</small>
        <h3>gallery test</h3>
        <small>2 photos</small>
         <a href="/gallery/gallery-1" title="">Open Gallery</a>
        <div class="share-buttons"></div>
    </div>
</div>

CSS

body {
    background: lime;
    width: 470px;
    height: 470px;
    padding: 40px;
}
.thumbnail-frame {
    background:white;
    background-color:white;
    background:-webkit-gradient(linear, left top, left bottom, from(white), to(#E9E9E9));
    background:-webkit-linear-gradient(top, white, #E9E9E9);
    background:-moz-linear-gradient(top, white, #E9E9E9);
    background:-ms-linear-gradient(top, white, #E9E9E9);
    background:-o-linear-gradient(top, white, #E9E9E9);
    position:relative;
    border:1px solid #CCC5BB;
    border:1px solid rgba(0, 0, 0, 0.1);
    padding:20px;
    box-sizing:border-box;
    z-index:10;
}
.thumbnail-frame:before {
    display:block;
    content:" ";
    width:470px;
    height:470px;
    background:red;
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
    border:1px solid #CCC5BB;
    border:1px solid rgba(0, 0, 0, 0.1);
}
.thumbnail-frame:hover .details {
    height:350px;
    padding-top:70px;
}
.thumbnail-frame > img {
    display:block;
}
.thumbnail-frame .details {
    position:absolute;
    top:20px;
    left:20px;
    text-align:center;
    background:black;
    background:rgba(0, 0, 0, 0.65);
    width:420px;
    height:100px;
    overflow:hidden;
    padding-top:10px;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -ms-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
}
.thumbnail-frame .details small {
    font-family:'Georgia', serif;
    font-style:italic;
    color:#BEA087;
    font-size:0.9375em;
    display:inline-block;
}
.thumbnail-frame .details h3 {
    font-family:'Geared', slab-serif, sans-serif;
    color:white;
    font-size:1.5em;
    text-transform:uppercase;
    margin-top:5px;
}
.thumbnail-frame .details a {
    display:block;
    margin-top:50px;
    margin-bottom:50px;
}

我看到一些人发布了类似的问题，但提出的解决方案都不可行。

非常感谢

Answer 1

从父div中移除这个

z-index: 10;

:before 和 :after 上的 z-index 仅在父级没有 z-index 时才有效