0

对于现场演示，我在这里设置了小提琴

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

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

我正在使用 :before 尝试在我的 div 之前的流中定位一个元素并稍微旋转它，但是它的索引出现在我的元素顶部。

小提琴显示了这一点-我希望红色方块在白色方块后面

预习

标记在现场，但如果您想快速浏览一下，就在这里。

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

我看到一些人发布了类似的问题，但没有一个提议的解决方案是可行的。

非常感谢

4

1 回答 1

2

从父 div 中删除它

z-index: 10;

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

于 2013-06-11T10:30:54.497 回答