Open
0

Why is the pink box ABOVE orange box?

If you delete line 25 in CSS, you will notice that the orange box is above green and pink box. This result is NOT surprising for me. But if you leave line 25 (that gives green box display:flex) then I don't understand why the orange box comes below pink box. I am not using z-index and all these elements are not positioned. So, as mdn says: " When the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): 1) The background and borders of the root element 2) Descendant non-positioned blocks, in order of appearance in the HTML 3) Descendant positioned elements, in order of appearance in the HTML " See the second point," the order of appearance in html". This happens when I remove line 25 "display:flex" but why it doesn't happen with it? https://code.sololearn.com/WkL99wn9s5XH/?ref=app

17th Apr 2022, 6:51 PM
Lofty
Lofty - avatar
2 Answers
0
I think your div.b inside div.a !!?
17th Apr 2022, 7:02 PM
Jayakrishna 🇮🇳
0
Jayakrishna🇮🇳 Yes, I intentionally put it there. It's a child of a div element of class "a". div "a" is a flex container div "b" is a flex item
17th Apr 2022, 7:06 PM
Lofty
Lofty - avatar