親のオーバーフローを伴うCSSのトップZインデックスの強制：

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

コンテンツの外側divのoverflow:visibleを作成してください。