Flexbox, z-index e posizione: statico: perché non funziona?

In base alle specifiche della flexbox:Flexbox, z-index e posizione: statico: perché non funziona?

..4.3. Flex Item Z-Ordering, ... e z-index valori diversi da auto creare un contesto di stacking anche se position è static.

Così, ho pensato z-index/opacity dovrebbe funzionare come al solito con FlexBox ma quando mi applico a questo HTML/CSS non funziona (il mio obiettivo era di mettere .header in cima .core creazione di due strati):

.header { 
 
    opacity: 0.5; 
 
    z-index: 2; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
} 
 
.headerLeft { 
 
    z-index: inherit; 
 
    background-color: blue; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 2 1 250px; 
 
} 
 
.headerCenter { 
 
    z-index: inherit; 
 
    background-color: red; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 1 1 175px; 
 
} 
 
.headerRight { 
 
    z-index: inherit; 
 
    background-color: green; 
 
    text-align: right; 
 
    align-self: stretch; 
 
    flex: 1 1 100px; 
 
} 
 
.core { 
 
    z-index: 0; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
} 
 
.coreItem { 
 
    align-self: stretch; 
 
    flex: 1 1 400px; 
 
}

<body> 
 
    <div class="header"> 
 
    <div class="headerLeft">Left</div> 
 
    <div class="headerCenter">Center</div> 
 
    <div class="headerRight">Right</div> 
 
    </div> 
 
    <div class="core"> 
 
    <div class="coreItem">Core1</div> 
 
    <div class="coreItem">Core2</div> 
 
    <div class="coreItem">Core3</div> 
 
    <div class="coreItem">Core4</div> 
 
    <div class="coreItem">Core5</div> 
 
    <div class="coreItem">Core6</div> 
 
    </div> 
 
</body>

ho usato i prefissi adeguati sulle proprietà di flessione. Non capisco perché non funzioni.

fonte

2015-10-28 Paulo Janeiro

Come hai scritto nella tua domanda, elementi non devono essere posizionati per z-index a lavorare in un contenitore flessibile.

Gli articoli Flex possono partecipare a un ordine di impilamento z-index anche con position: static, che non è vero per altri modelli di box CSS (eccetto Grid) dove z-index funziona solo sugli elementi posizionati.

4.3. Flex Item Z-Ordering

articoli Flex vernice esattamente lo stesso come blocchi in linea, tranne che order ordine documento -Modified viene usato al posto del documento grezzo ordine, e z-index valori diverso auto creare un contesto di stratificazione anche se position è static.

Il motivo z-index non funziona nel codice è che div.header e div.core non sono elementi di flessione. Sono figli di body, ma body non è un contenitore flessibile.

Per fare in modo che z-index funzioni qui, è necessario applicare display: flex a body.

Aggiungi questo al vostro codice:

body { 
    display: flex; 
    flex-direction: column; 
}

Revised Demo

Maggiori dettagli: https://stackoverflow.com/a/35772825/3597276

fonte

2015-10-28 15:07:26

Flexbox, z-index e posizione: statico: perché non funziona?

risposta

Problemi correlati