Can't get this div upfront with z-index

Question

So I'm trying to get the blue colored element to be upfront since the red colored one is staying in front of the blue one making the text appear bellow it, this is messing with the layout I had imagined.

I'm using z-index property but the red oval shaped element is staying upfront no matter what...

This is my code:

<div style="width:100%; height:auto; display:flex; flex-direction:column; overflow:hidden; outline:1px solid red; ">
    <div style="width:100%; height:auto; background-color:red; position:relative; margin-top:300px; padding:25px;">
     <div style="width:105%; height:500px; border-radius:50%; position:absolute; left:50%; z-index:1; transform:translateX(-50%);  top:-150px; background-color:red;"></div>
     <div style="width:100%; min-height:500px; background-color:blue; z-index:2; display:flex; flex-direction:column; ">
            <span style="font-size:30px; color:red; align-self:center; margin-top:auto;">MENU</span>
  </div>
 </div>
</div>

it hurts reading this code ... – Temani Afif Jul 05 '18 at 13:39 — Temani Afif, Jul 05 '18 at 13:39
Consider the use of style sheets for something like this – t.. Jul 05 '18 at 13:40 — t.., Jul 05 '18 at 13:40

PIIANTOM · Answer 1 · 2018-07-05T13:46:03.153

0

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

You can learn more on z-index with W3 School

set position:relative to your blue div

edited Jul 05 '18 at 13:46

answered Jul 05 '18 at 13:40

PIIANTOM

1,311
11
20

Can't get this div upfront with z-index

1 Answers1