스태킹 Z- 인덱스 문제 : 라이브 데모를 들어

Question

전에 나는 기본적으로 내가 2 "사진"의 스택 만들려고 해요 여기

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

바이올린 설정을했습니다 - 순수 CSS를 사용하여, 캔트는 현재 마크 업을 만지지 만 99 %는 거기에 쌓여 있습니다.

내가 사용하고있는 : 전에 내 div 앞에 요소를 배치하고 약간 회전 시키려고하지만 인덱스가 내 요소 위에 표시됩니다. 내가

마크 업이 바이올린 라이브입니다 뒤에 한 흰색에 붉은 광장을 원하는 this-

바이올린

는 보여 주지만를 heres 그것은 당신 넣다 빠른보기를 원한다.

<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

에 부모 사업부에서

z-index: 10; 

Z- 인덱스이 제거 : 부모가