html - spec - ¿Por qué el índice Z no funciona?
html5 whatwg (4)
Entonces, si entiendo z-index correctamente, sería perfecto en esta situación:
Quiero colocar la imagen inferior (la etiqueta / tarjeta) debajo del div encima de ella. Entonces no puedes ver los bordes filosos. ¿Cómo hago esto?
z-index:-1 // on the image tag/card
o
z-index:100 // on the div above
tampoco funciona Tampoco una combinación de algo como esto. ¿Cómo?
En muchos casos, un elemento debe posicionarse para que funcione el z-index .
De hecho, la aplicación de la position: relative a los elementos en la pregunta probablemente resolvería el problema (pero no hay suficiente código para saberlo con certeza).
En realidad, la position: fixed , position: absolute y position: sticky también habilitará z-index , pero esos valores también cambian el diseño. Con position: relative la disposición no se altera.
Básicamente, siempre que el elemento no sea la position: static (la configuración predeterminada) se considera posicionado y z-index funcionará.
Muchas respuestas a "¿Por qué no funciona el índice z?" las preguntas afirman que z-index solo funciona en elementos posicionados. A partir de CSS3, esto ya no es cierto.
Los elementos que son elementos flexibles o elementos de la cuadrícula pueden usar z-index incluso cuando la position es static .
De las especificaciones:
4.3. Elemento flexible Pedido Z
Los elementos Flex pintan exactamente lo mismo que los bloques en línea, excepto que el orden de documento modificado por orden se utiliza en lugar del orden de documento sin procesar, y
z-indexvalores dez-indexque no seanautocrean un contexto de apilamiento incluso si lapositionesstatic.5.4. Orden del eje Z: la propiedad del
z-indexEl orden de pintura de los elementos de la cuadrícula es exactamente el mismo que el de los bloques en línea, excepto que el orden de documento modificado por orden se utiliza en lugar del orden de documento sin procesar, y
z-indexvalores dez-indexque no seanautocrean un contexto de apilamiento incluso si lapositionesstatic.
Aquí hay una demostración de z-index trabaja en elementos flexibles no posicionados: https://jsfiddle.net/m0wddwxs/
La propiedad del z-index solo funciona en elementos con un valor de position que no sea static (por ejemplo, position: absolute; position: relative; o position: fixed ).
También hay una position: sticky; es compatible con Firefox, tiene el prefijo Safari, trabajó durante un tiempo en versiones anteriores de Chrome bajo una bandera personalizada y está bajo consideración de Microsoft para agregarlo a su navegador Edge.
Si establece la posición en otro valor que no sea static pero el z-index su elemento aún no parece funcionar, es posible que algún elemento padre tenga un z-index establecido.
Los contextos de apilamiento tienen jerarquía, y cada contexto de apilamiento se considera en el orden de apilamiento del contexto de apilamiento del padre.
Entonces con el siguiente html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div>
no importa qué tan grande se configure el z-index de el3 , siempre estará bajo el1 porque su padre tiene un contexto de apilamiento más bajo. Puede imaginar el orden de apilamiento como niveles donde el orden de apilamiento de el3 es en realidad 3.8, que es menor que 5 .
Si desea verificar el contexto de apilamiento de los elementos principales, puede usar esto:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
Hay un excelente artículo sobre cómo apilar contextos en MDN
tus elementos necesitan tener un atributo de posición. (por ejemplo, absoluto, relativo, fijo) o z-index no funcionará