CSS強制頂級z-index與父溢出：隱藏

Question

我無法理清如何移動元素，它位於.content-wrapper{ overflow:hidden; .content{position:absolute;} } .content-wrapper{ overflow:hidden; .content{position:absolute;} } ，到最頂端。

考慮下面的截圖：

帶有man照片的圖像元素放在.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

我會考慮在外面添加圖像並調整位置以獲得此圖像。 更改翻譯以調整位置：

 .wrapper { width: 100%; overflow: hidden; position: relative; /*change this*/ 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: 0; right: 0; padding: 20px calc(40% - 0.4*148px) 0 20px; /* the space of the image*/ } .content.positioned img { position: absolute; opacity: 0; /*Hide this one*/ } .hack { /*Don't use any top/bottom here !!*/ left: 190px; right: 10px; position: absolute; z-index: 1; } .hack img { width: 40%; position: absolute; right: 0; bottom: 0; transform: translateY(70%); max-width:300px; } 

 <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="hack"> <img src="//i.imgur.com/DsOdy1V.png"> </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 2

嘗試使overflow:visible內容的外部div overflow:visible 。

Answer 3

添加一個像<div> content <div>一樣的content-wrapper-inner，並將內容包裝器中的高度，位置移動到其中。

 .wrapper{ width:100%; overflow:hidden; position:initial; padding:0 10px; background-color:#EEEEEE; box-sizing:border-box; } .content-wrapper{ overflow:hidden; background-color:#DDDDDD; margin:10px 0; } .content{ background-color:white; position:absolute; top:30px; left:10px; right:10px; bottom:10px; } .content-wrapper-inner { min-height:350px; position:relative; background-color: red; } .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-wrapper-inner"> <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 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 4

你不能讓內容超出父級溢出：隱藏，仍然可以找到顯示頭部的方法。 問題是為什么你需要隱藏在父級上的溢出。

也許你可以為圖像容器使用兄弟元素並限制內容容器上的溢出。

就像是：

HTML

 <div class="parent">
   <div class="child-content-wrapper">
     Content goes here
   </div>
   <div class="child-image">
     Image goes here
   </div>
 </div>

CSS：

 .parent {
    position: relative;
 }

 .child-content-wrapper {
    overflow: hidden;
 }

 .child-image {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
 }

這應該工作，你將能夠獲得旋轉內容框和整個頭部的截止效果。