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 に答える