¿Por qué se ignora el índice Z con la posición: estático?

Question

ver este comentario 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 

veo que zIndex() retornos de jQuery 0 si el elemento es position: static.

No se admite el índice z en la posición: estático? (A mí me funciona en Chrome, no han probado varios navegadores)

Answer 1

Debido position: static significa "Ignorar todas las instrucciones de posicionamiento de left, top, z-index, etc.".

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

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

Un elemento se dice que está posicionado si su propiedad 'position' tiene un valor distinto de 'estático'.

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

Answer 2

z-index no se ignora para flex-elementos (elementos secundarios inmediatos de flex-contenedor, elemento con display: flex o display: inline-flex). De w3c flexbox spec:

Flex items pintura exactamente igual que los bloques en línea CSS21, excepto que el orden del documento modificado con order se utiliza en lugar del orden del documento en bruto, y z-index valores distintos de auto crear un contexto de pila incluso si es positionstatic .

Así que supongamos que tenemos este diseño con la superposición (.flex-item-two se superpone .flex-item-one utilizando márgenes por ejemplo negativos):

.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>

Si flex-item-one índice es más grande que .flex-item-two 's, .flex-item-one luego se superpone .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>