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

Question

我无法弄清楚如何将位于.content-wrapper{ overflow:hidden; .content{position:absolute;} } 下的元素移动到最顶部。

请看下面的截图：

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

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

==== 补充1 ====

为了澄清问题，我在下面编了一个代码sn-p：

.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> 类似 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 3

尝试将overflow:visible设为内容的外层div。

Answer 4

您无法通过 overflow: hidden 让内容从父母那里获得，但仍能找到显示头部的方法。问题是为什么你需要在父级上隐藏溢出。

也许您可以为图像容器使用同级元素并限制内容容器的溢出。

类似：

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

这应该可行，您将能够在旋转的内容框和整个头部上获得截断效果。