Absolute position element cannot overflow other flex items

Question

Who can I set the black box to be on top of the second box? As you can see every brown box is 100px and the black box is 150px. So I need the black box to fill the second half brown box too. But I cannot figure out any way to achieve that.

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

user_9153448 · Answer

the overflowing container is below the second .contents. You need to come over to the .content. So add z-index: 1; on the .overflowing-div. So that It can come on top of it.

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

Absolute position element cannot overflow other flex items

1 Answers