상위 오버플로가있는 CSS에서 맨 위 z- 인덱스 : hidden

Question

.content-wrapper{ overflow:hidden; .content{position:absolute;} } 아래에있는 요소를 맨 위로 이동하는 방법을 결정할 수 없습니다.

사람의 사진과 이미지 요소가 .content 요소 아래에 배치됩니다 :

아래 스크린 샷을 고려하십시오. 그러나 노란색으로 강조 표시된 사진의 머리 부분 (0122)은 부모에게 숨겨져 있으며 overflow:hidden 속성을가집니다. 가장 큰 문제는 내가 은 다른 숨겨진 오버플로를 변경할 수 없다는 것입니다.

실제로 자바 스크립트를 사용하지 않고 이러한 문제를 해결할 수 있습니까?

.wrapper{ 
 
    width:100%; 
 
    overflow:hidden; 
 
    position:initial; 
 
    padding:0 10px; 
 
    background-color:#EEEEEE; 
 
    box-sizing:border-box; 
 
} 
 

 
.content-wrapper{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    background-color:#DDDDDD; 
 
    margin:10px 0; 
 
    min-height:350px; 
 
} 
 

 
.content{ 
 
    background-color:white; 
 
    position:absolute; 
 
    top:30px; 
 
    left:10px; 
 
    right:10px; 
 
    bottom:10px; 
 
} 
 

 
.content.grayed{ 
 
    background-color:#CCCCCC; 
 
} 
 

 
.content.positioned{ 
 
    top:50px; 
 
    left:180px; 
 
    bottom:-50px; //negative positioned parts supposed to be hidden 
 
    right:-50px; //as .content-wrapper has overflow:hidden; 
 
} 
 

 
.content.positioned img{ 
 
    width:40%; 
 
    height:auto; 
 
    margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper 
 
    margin-left:10vw; 
 
    min-width:250px; 
 
}

<div class="wrapper"> 
 
.wrapper 
 
<div class="content-wrapper"> 
 
.content-wrapper 
 
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;"> 
 
<strong>.content</strong> with cut off edges - that is supposed behaviour 
 
</div> 
 
</div> 
 

 
<div class="content-wrapper"> 
 
.content-wrapper 
 
<div class="content positioned"> 
 
<strong>.content</strong> 
 
<img src="//i.imgur.com/DsOdy1V.png"> 
 
<br> 
 
...and a man above is with sliced head - that is UNsupposed behaviour 
 
</div> 
 
</div> 
 

 
</div>

없이 정말 거기 :

는 ==== 보충 1

이 문제를 명확히하기 위해 ====, 나는 아래의 코드를했습니다 어떤 해결책?

Answer 1

내용의 바깥 쪽 부분에 overflow:visible을 만드십시오.