¿Por qué se ignora el índice z con position: static en CSS?

Porque se supone que debe ser

z-index no es una propiedad de posicionamiento. Es una propiedad de pintura. [1]

z-index existe para el escenario donde dos elementos ya se superponen . En el caso de que los elementos se superpongan, el trabajo de z-index es decirle al navegador qué elemento pintar primero.

Es una propiedad de contexto de apilamiento

Solo obtiene una situación en la que los elementos se superponen cuando se ha creado un contexto de apilamiento. Se crea un contexto de apilamiento en unos 11 escenarios diferentes [2]. Pero position:static no es una de ellas.

Se crea un contexto de apilamiento cuando hay una situación en la que los elementos pueden o se superponen.

Dado que position:static no crea un contexto de apilamiento, z-index no tiene ningún papel que jugar en ese elemento, porque el navegador sabe cuándo pintar el elemento.

Notas al pie

[1] Descripción elaborada de los contextos de apilamiento

[2] El contexto de apilamiento

Porque position : static significa “Ignorar todas las instrucciones de posicionamiento desde la izquierda, arriba, índice z , etc.”. Se dice que un elemento está posicionado si su propiedad ‘ posición ‘ tiene un valor diferente a ‘ estático

lectura completa;

¿Por qué se ignora el índice z con position: static?

position: static significa que el elemento se coloca donde normalmente estaría en el flujo y, por lo tanto, no debería superponerse con otras cosas. Si desea usar el índice z pero no mover el elemento, use position: Relative.

Hola,

Porque position: static significa “Ignorar todas las instrucciones de posicionamiento desde la left , top , z-index , etc.”. Contrátame a través de Fiverr

‘índice z’
Valor: auto | | heredar
Inicial: auto
Se aplica a: elementos posicionados

Si usa position: static, eso significa que no funcionará ninguna propiedad como arriba, izquierda, derecha, abajo, índice z. Si desea usar el índice z, use la posición relativa, luego de superponer cualquier elemento.