> Faqs > ¿Por qué z-index no funciona?

¿Por qué z-index no funciona?

Estoy intentando que unos elementos aparezcan por encima de otros pero no consigo que el valor de z-index de CSS se tenga en cuenta.

Tengo una caja modal, que se presenta al usuario por encima de otros elementos. Pero además tengo unos mensajes de feedback que deberían aparecer por encima de la caja modal. Por encima de cualquier otro elemento en realidad.

Sin embargo, por mucho que le aumento el z-index, no consigo que el mensaje de feedback aparezca encima de la caja modal. Aparece por debajo y no se llega a ver. He revisado el z-index de la caja modal y es menor que el que estoy colocando en los elementos de mensajes de feedback y ya no sé que hacer.

Respuestas

Para asegurarte que z-index funciona en una página web tienes que verificar lo siguiente:

  • Que el elemento donde tienes aplicado el z-index tiene el atributo position, que sea igual a "absolute", "fixed", "relative".
.mis_elementos {
    position: relative;
}

Si no tienes definido un position válido, el atributo z-index no tendrá valor alguno.

  • Que el elemento donde tienes aplicado el z-index no tiene un z-index menor que el elemento sobre el que te quieres superponer.

Esto es importante y puede dar lugar a errores difíciles de detectar. Por ejemplo, en el siguiente código.

<div class="mi_padre">
    <span class="mi_hijo">
        ... contenido ...
    </span>
</div>

<style>
    .mi_padre {
        position: relative;
        z-index: 10;
    }
    .mi_hijo {
        position: absolute;
        z-index: 1000;
    }
</style>

Por mucho que al elemento de clase "mi_hijo", le hayas marcado un z-index de 1000, si lo has colocado dentro de otro elemento que tiene el z-index de 10, no conseguirá ganar el valor de z-index 1000.

Revisa estas dos situaciones y seguramente consigas resolver tu problema de posicionamiento.

Guillermo
124 4 8 9
Me ha servido mucho tu respuesta. He podido entender perfectamente las restricciones del z-index para hacerlo funcionar. Gracias!