CSS強制使用父溢出的頂部z-index：隱藏

Question

我無法理清如何將放置在.content-wrapper{ overflow:hidden; .content{position:absolute;} }下的元素移動到最頂端。

考慮下面的屏幕截圖：

與人照片的圖像元素放置在.content元素數量。但是他的頭部照片上的部分，用黃色突出顯示（用紅色箭頭指示）是隱藏的，因爲父母.content-wrapper具有overflow:hidden屬性。主要問題是我不能更改隱藏溢出到其他任何。

這實際上是真正解決這個問題，而不使用JavaScript？

====補充1 ====

爲了澄清這個問題，我做了以下代碼片段：

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

難道真的沒有任何解決方案

Answer 1

試着製作overflow:visible的內容的外部div。