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

我会考虑在外面添加图像并调整位置以获得它。更改平移以调整位置：

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