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

Question

我无法理清如何将放置在.content-wrapper{ overflow:hidden; .content{position:absolute;} }下的元素移动到顶部。

请看下面的截图：

带有人照片的图像元素放在.content元素下。但由于父母.content-wrapper有一个overflow:hidden属性，他的头部照片上的部分用黄色（用红色箭头指向）突出显示是隐藏的。主要问题是我无法将隐藏的溢出更改为其他任何内容。

在不使用JavaScript的情况下解决这样的问题真的是真的吗？

==== Supplement 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:visibleof内容的外部div。

Answer 3

添加一个类似content-wrapper-inner的<div>，并将内容包装器中的高度，位置移动到其中。

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

这应该工作，你将能够获得旋转的内容框和整个头部的截止效果。