Question

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

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

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

小提琴显示了这一点 - 我希望红色方块位于白色背后

Preview

标记出现在小提琴中，但是你需要快速查看它。

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

z-index on：before和：after仅在父级没有z-index

时才有效

使用：之前堆叠z-index问题

1 个答案: