Hace unos días estaba armando una página web y quería que un elemento específico quedara por encima de los demás. Así que hice uso, en la hoja de estilos CSS, de la propiedad z-index para colocarlo arriba en el orden de apilamiento. Pero no me daba los resultados esperados.
Así que, búsqueda mediante, di con es siguiente video del canal de YouTube Coder Coder, de Jessica Chan:
En él explica que hay algunas circunstancias donde no es suficiente con poner un número más alto como valor de la propiedad z-index
para conseguir que un elemento se muestre por encima de los demás.
Estas son las condiciones a tener en cuenta a la hora de usar la propiedad z-index
:
- 1. Contexto de apilamiento
- Los elementos en el mismo contexto de apilamiento se muestran en orden de aparición, con los elementos posteriores por encima de los anteriores.
- 2. Elementos posicionados
- Los elementos necesitan tener su posición definida (con la propiedad
position
) con cualquier valor que no seastatic
para quez-index
pueda funcionar.
Además, los elementos posicionados (con la propiedadposition
) se mostrarán por encima de los elementos no posicionados. - 3. Propiedades especiales
- Algunas propiedades CSS como
opacity
ytransform
colocan a los elementos en un nuevo contexto de apilamiento.
Aplicar la propiedadtransform
a un elemento hace que se comporte como si tuviera unstatic
con valor cero. - 4. Orden de los ancestros
- El
z-index
de un elemento puede quedar limitado por el valor dez-index
de su elemento padre.
Teniendo en cuenta estos puntos pude solucionar el problema que se me había presentado.
Como alternativa al video, pueden leer la misma entrada en coder-coder.com, la web de la autora del video.
No hay comentarios.:
Publicar un comentario
Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.