CSS强制顶级z-index与父溢出：隐藏

Question

我无法理清如何将位于.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

尝试制作内容的外部div的overflow:visible。

Answer 3

添加一个<div>之类的content-wrapper-inner并将高度，位置从content-wrapper移入其中。

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

这应该起作用，您将能够在旋转的内容框和整个头部上获得截止效果。