绝对位置元素不能溢出其他弹性项目

【问题标题】：Absolute position element cannot overflow other flex items绝对位置元素不能溢出其他弹性项目
【发布时间】：2021-07-18 03:15:31
【问题描述】：

我可以将黑盒子设置在第二个盒子的顶部吗？如您所见，每个棕色框都是 100 像素，黑色框是 150 像素。所以我也需要黑色盒子来填充下半部分棕色盒子。但我想不出任何方法来实现这一点。

.container {
  display: flex;
}

.contents {
  width: 100px;
  height: 100px;
  background-color: antiquewhite;
  border: dotted 1px #c7c7c7;
  position: relative;
}

.overflowing-div {
  position: absolute;
  width: 150px;
  height: 50px;
  background-color: black;
}

<div class="container">

  <div class="contents">
    <div class="overflowing-div"></div>
  </div>

  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
</div>

【问题讨论】：

标签： css flexbox frontend css-position

【解决方案1】：

溢出的容器低于第二个.contents。你需要过来.content。所以在.overflowing-div 上添加z-index: 1;。这样它就可以在它上面。

.container {
  display: flex;
  position: relative;
}

.contents {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: antiquewhite;
  border: dotted 1px #c7c7c7;
}

.overflowing-div {
  position: absolute;
  z-index: 1;
  width: 150px;
  height: 50px;
  background-color: black;
}

<div class="container">

  <div class="contents">
    <div class="overflowing-div"></div>
  </div>

  <div class="contents"></div>
  <div class="contents"></div>
  <div class="contents"></div>
</div>

【讨论】：

很高兴我能帮上忙