Perché lo z-index viene ignorato con la posizione: statica?

Question

Vedere questo commento from jquery-ui

// Ignore z-index if position is set to a value where z-index is ignored by the browser 
// This makes behavior of this function consistent across browsers 
// WebKit always returns auto if the element is positioned 

vedo che zIndex() rendimenti di jQuery 0 se l'elemento è position: static.

Non è supportato lo z-index in posizione: statico? (Funziona per me in Chrome, non hanno testato cross-browser)

Answer 1

Perché position: static significa "Ignorate tutte le istruzioni di posizionamento da left, top, z-index, ecc".

'z-index' 
Value:  auto | <integer> | inherit 
Initial: auto 
Applies to:  positioned elements 

- http://www.w3.org/TR/CSS21/visuren.html#z-index

Un elemento è detto essere posizionato se la sua proprietà 'posizione' ha un valore diverso da 'statica'.

- http://www.w3.org/TR/CSS21/visuren.html#positioned-element

Answer 2

z-index non viene ignorato per flex-elementi (figli immediati di flex-contenitore, elemento con display: flex o display: inline-flex). Da w3c flexbox spec:

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

Quindi supponiamo di avere questo layout con sovrapposizione (.flex-item-two sovrappone .flex-item-one utilizzando margini es negativi):

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item-one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: -50px; 
 
} 
 

 
.flex-item-two { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="flex"> 
 
    <div class="flex-item flex-item-one">One</div> 
 
    <div class="flex-item flex-item-two">Two</div> 
 
</div>

Se flex-item-one indice è più grande di .flex-item-two 's, .flex-item-one poi si sovrappone .flex-item-two.

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item-one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: -50px; 
 
    z-index: 1; 
 
} 
 

 
.flex-item-two { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="flex"> 
 
    <div class="flex-item flex-item-one">One</div> 
 
    <div class="flex-item flex-item-two">Two</div> 
 
</div>