z-index arbeitet nicht an Text in Flex item

Question

Ich habe einen Flex-Container mit einigen Flex-Elementen im Inneren, und ich habe eine große Anzahl (die ich in eine Spannweite gewickelt habe), die ich hinter sitzen möchte der Text.

Aus irgendeinem Grund funktioniert der Z-Index nicht auf diesem Span-Element. Laut der Spezifikation sollte sich flexbox sowohl mit Flex-Containern als auch mit Flex-Items normal verhalten, aber ich kann den weißen Text nicht auf die schwarze Nummer setzen. (oder drücken Sie die Nummer hinter dem Text, beides ist in Ordnung).

codepen: https://codepen.io/emilychews/pen/rpjpmB

CSS

.row { 
display: flex; 
margin: auto; 
padding: 1rem; 
background-color: red; 
width: 70%; 
max-width: 1043px; 
box-sizing: border-box; 
} 

#row-2 {background: red;} 

#row-2 div { 
    position: relative; 
    box-sizing: border-box; 
    margin: .5rem; 
    padding: 2.488rem 1rem; 
    flex: 1; 
    z-index: 1; 
} 

#number1 {position: absolute; font-size: 7.4300rem; z-index: 1;} 

#row-2 > div > h3, #row-2 > div > p {text-align: center; color: white; z-index:99;} 

HTML

<div id="row-2" class="row"> 
    <div> 
    <span id="number1">01</span> 
    <h3>This is A Title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div> 
    <h3>This is A Title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div> 
    <h3>This is A Title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
</div> 

Answer 1

In einem flexiblen Behälter, z-index Arbeiten ohne die Notwendigkeit für die Positionierung Eigenschaften (source).

Mit anderen Worten, Flex-Elemente können z-index mit position: static verwenden.

Ihr Text ist jedoch kein Flex-Element. Es ist ein Kind eines Flex-Elements, so dass diese z-index Methode nicht funktioniert.

Als Lösung, machen Sie die Flex-Elemente in (verschachtelte) Flex-Container.

.row { 
 
    display: flex; 
 
    margin: auto; 
 
    padding: 1rem; 
 
    background-color: red; 
 
    width: 70%; 
 
    max-width: 1043px; 
 
    box-sizing: border-box; 
 
} 
 
#row-1 { 
 
    background: red; 
 
} 
 
#row-1 div { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    margin: .5rem; 
 
    padding: 2.488rem 1rem; 
 
    flex: 1; 
 
    z-index: 1; 
 
    display: flex;   /* NEW */ 
 
    flex-direction: column; /* NEW */ 
 
} 
 
#number1 { 
 
    position: absolute; 
 
    font-size: 7.4300rem; 
 
    z-index: 1; 
 
} 
 
#row-1 > div > h3, 
 
#row-1 > div > p { 
 
    text-align: center; 
 
    color: white; 
 
    z-index: 99; 
 
    margin-bottom: 0; 
 
}

<div id="row-1" class="row"> 
 
    <div> 
 
    <span id="number1">01</span> 
 
    <h3>This is A Title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div> 
 
    <h3>This is A Title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div> 
 
    <h3>This is A Title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
</div>

Answer 2

<div id="row-2" class="row"> 
    <span id="number1">01</span> 
    <div> 
    <h3>This is A Title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div> 
    <h3>This is A Title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div> 
    <h3>This is A Title</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
</div> 

bewegen die Spanne wich die Nummer ein Elternteil bis enthält.

codepen

Answer 3

change # zahl1 z-Index -1

.row { 
 
    display: flex; 
 
    margin: auto; 
 
    padding: 1rem; 
 
    background-color: red; 
 
    width: 70%; 
 
    max-width: 1043px; 
 
    box-sizing: border-box; 
 
} 
 

 
#row-1 {background: red;} 
 

 
#row-1 div { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    margin: .5rem; 
 
    padding: 2.488rem 1rem; 
 
    flex: 1; 
 
    z-index: 1; 
 
} 
 

 
#number1 {position: absolute; font-size: 7.4300rem; z-index: -1;} 
 

 
#row-1 > div > h3, #row-1 > div > p {text-align: center; color: white; z-index:99;}

<div id="row-1" class="row"> 
 
    <div> 
 
    <span id="number1">01</span> 
 
    <h3>This is A Title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div> 
 
    <h3>This is A Title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    <div> 
 
    <h3>This is A Title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
</div>