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

Question

谁可以设置黑框在第二个框的上面？如您所见，每个棕色框都是 100px，黑色框是 150px。所以我也需要黑框来填充下半个棕色框。但是我想不出任何方法来实现它。

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

Answer 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>

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

Absolute position element cannot overflow other flex items

css

frontend

css-position

flexbox