¿Por qué el índice z no funciona?

Entonces, si entiendo z-indexcorrectamente, 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 afilados. ¿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?

La z-indexpropiedad solo funciona en elementos con un positionvalor distinto de static(p position: absolute;. Ej . position: relative;, O position: fixed).

También hay position: sticky;compatibilidad con Firefox, tiene el prefijo Safari, funcionó durante un tiempo en versiones anteriores de Chrome con un indicador personalizado y Microsoft está considerando agregarlo a su navegador Edge.

Importante
Para un posicionamiento regular, asegúrese de incluir position: relativeen los elementos donde también configura el z-index. De lo contrario, no tendrá efecto.

Si establece la posición en un valor diferente staticpero el elemento z-indextodavía no parece funcionar, puede ser que algún elemento principal se haya z-indexconfigurado.

Los contextos de apilamiento tienen jerarquía, y cada contexto de apilamiento se considera en el orden de apilamiento del contexto de apilamiento primario.

Así que 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 cuán grande es el z-indexde el3se establecerá, siempre será bajo el1, ya que de los padres tiene contexto de pila baja. Puede imaginar el orden de apilamiento como niveles en los que el orden de apilamiento el3es en realidad 3.8, que es inferior a 5 .

Si desea verificar los contextos de apilamiento de elementos primarios, 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 gran artículo sobre contextos de apilamiento en MDN

Sus elementos necesitan tener un positionatributo. (p absolute. ej . relative, fixed) o z-indexno funcionará.

En muchos casos, un elemento debe estar posicionado para z-indextrabajar.

De hecho, la aplicación position: relativea los elementos en la pregunta probablemente resolvería el problema (pero no se proporciona suficiente código para saberlo con certeza).

En realidad, position: fixed, position: absolutey position: stickypermitirá también z-index, pero esos valores también cambiar el diseño. Con position: relativeel diseño no se altera.

Esencialmente, mientras el elemento no esté position: static(la configuración predeterminada) se considera posicionado y z-indexfuncionará.

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 cuadrícula se pueden usar z-indexincluso cuando positionestán static.

De las especificaciones:

4.3. Artículo Flex Z-Ordering

Los elementos flexibles pintan exactamente igual que los bloques en línea, excepto que el orden del documento modificado se usa en lugar del orden del documento sin procesar y los z-indexvalores que no sean autocrear un contexto de apilamiento, incluso si positiones así static.

5.4. Ordenamiento del eje Z: la z-indexpropiedad

El 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 del documento modificado se usa en lugar del orden del documento sin procesar y los z-indexvalores que no sean autocrear un contexto de apilamiento, incluso si positiones así static.

Aquí hay una demostración de cómo z-indextrabajar en elementos flexibles no posicionados: https://jsfiddle.net/m0wddwxs/