Flexbox items are overlapping z-index set on sibling elements

Question

I have a flexbox with multiple children in it. Each flex-item has a child element that is being overlapped by the next sibling flex-item. How do you correct or account for this behavior?

Here is a demo of the behavior in question. There were several other questions on SO that suggested applying a greater z-index to the :first-child in the group. This worked - but only for the first element.

.container {
  display: flex;
  background: #eee;
  margin-top: 5%;
  height: 100px;
  z-index: 1;
}

.container .flex-item {
  _flex: 0 0 1;
  width: 25%;
  height: 80px;
  margin: 10px;
  position: relative;
  background: #ccc;
  z-index: 500;
}

.container .flex-item .widget {
  width: 70px;
  height: 70px;
  background-color: #004990;
  border-radius: 50%;
  position: absolute;
  top: -35px;
  right: -35px;
}

<div class="container">
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>  
</div>

I have a codepen that exemplifies the desired functionality https://codepen.io/barrychapman/pen/QWKLbKw - but the only way I could get it to work was to apply sequentially decreasing z-index's on each element in the list.

How can I achieve this desired behavior without the need for the codepen example?

Do you want to confined the `widget` ( blue circle) inside the `flex-item` ? — mhhabib, Nov 24 '20 at 17:49
This has nothing to do with the other questions tagged. This is regarding child elements of a flex that overlap EACH OTHER. — Barry Chapman, Nov 25 '20 at 14:02

score 2 · Answer 1 · answered Nov 24 '20 at 17:40

i may have not understood the question correctly.

But if you remove z-index from all elements and just add z-index : 1 only on .widget element, then you will achieve same thing as that codepen.

https://codepen.io/barrychapman/pen/QWKLbKw

.widget {
 z-index: 1;
}

score 1 · Accepted Answer · answered Nov 24 '20 at 17:39

You can just remove the z-index from every item except the widgets bubbles. This will lead to the desired output of having the bubbles always on top of any container.

.container {
  display: flex;
  background: #eee;
  margin-top: 5%;
  height: 100px;
}

.container .flex-item {
  flex: 0 0 1;
  width: 25%;
  height: 80px;
  margin: 10px;
  position: relative;
  background: #ccc;
}

.container .flex-item .widget {
  width: 70px;
  height: 70px;
  background-color: #004990;
  border-radius: 50%;
  position: absolute;
  top: -35px;
  right: -35px;
  z-index:1;
}

<div class="container">
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>
  <div class="flex-item">
    <div class="widget"></div>
  </div>  
</div>

perfect! I do not really know how I butchered that. Cheers! – Barry Chapman Nov 24 '20 at 17:56 — Barry Chapman, Nov 24 '20 at 17:56

Flexbox items are overlapping z-index set on sibling elements

2 Answers2