The z-index property is usually applied only to positioned elements (relative, absolute, fixed, etc.) https://jsfiddle.net/8e1hxkmy/ There are elements of P and H1, P is under H1 because H1 is set z-index layer priority: 2; Further, P has an embedded element EM, in which the z-index is even larger than that of H1, but since the EM is not positioned, it should not be adjusted to H1, but if its container P is assigned display: flex; So EM immediately begins to build on H1. Why this behavior?

p{ margin-bottom: -30px; position: relative; color: red; display: flex; background: blue; } h1{ position: relative; z-index: 2; background: green; } p em{ background: red; z-index: 3; } 
  <p>13231<em>666</em></p> <h1>Aaaaa</h1>

    2 answers 2

    This behavior is according to the w3.org specification.

    The elements of the Flex container are rendered as inline elements, except for the ability to use z-index even if position: static

    4.3. Flex Item Z-Ordering

    If you need to make it, then it’s not necessary to make it.

    • That is, z-index can be applied to elements of a flex container? - PeGaS
    • @PeGaS exams! - Crantisz

    z-index is applied not only to the position, but to all flexible elements. The elements position: absolite, fixed, static... and also flexible display: flex . Its priority blocks become because p stands before h1

     p{ margin-bottom: -30px; position: relative; color: red; display: flex; background: blue; z-index: 1; } h1{ position: relative; z-index: 2; background: green; } p em{ background: red; z-index: 3; } 
     <p>13231<em>666</em></p> <h1>Aaaaa</h1>