Render block in front of flex-items

Question

I want the red box to be rendered in front of the following flex items, but nothing I tried leads to this sort of order.

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.front .box {
  margin: 20px auto;
}

.back {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}

<div class="back">
  <div class="box yellow">
    <div class="box red" style="position:block; margin-left: 50px; z-index: 99999">2</div></div>
  <div class="box green">2</div>
</div>

maybe I chose a bad minimal example, cause it did not work, I've already tryed this approach *sadface — 28Smiles, Mar 12 '19 at 21:28
so edit your question to include a better minimal example. Actually your only issue a miss use of position property — Temani Afif, Mar 12 '19 at 21:30
I finally found the issue, the property overflow hidden was active, this lead to a hidden element and no z-index would work. Thank you all for your support — 28Smiles, Mar 13 '19 at 11:07

score 2 · Answer 1 · answered Mar 12 '19 at 21:24

Change it from position: block to position: absolute. There is no position: block, and you must use a proper positioning attribute to get z-index to work properly.

.box {
  font-size: 2.5rem;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.front .box {
  margin: 20px auto;
}

.back {
  display: flex;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px 0;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.red {
  background: red;
}

<div class="back">
  <div class="box yellow">
    <div class="box red" style="position:absolute; margin-left: 50px; z-index: 99999">2</div></div>
  <div class="box green">2</div>
</div>

score 1 · Answer 2 · answered Mar 12 '19 at 21:56

First thing I noticed was position:block which is actually wrong, position can basically be absolute or relative. And I strongly believe you could have put the inline styles in the .red CSS selector. To answer your question of putting the red box in front what you need is order property which has effect only on flex items so for example if you has

.green{
background: green;
order: -1;
}

The green box will be further to the left than the red box. Normally in the natural ordering all flex items has an order of zero (0) so give an item a negative other will move it further to the left until it gets to an element which is also a flex item that has a lesser order value. I noticed your red box doesn't have a height though or I omitted it accidentally while I was typing it in #happyCoding

Render block in front of flex-items

2 Answers2