Ver entrada completa. CSS: la propiedad z-index

Me han preguntado varias veces porque se ven algunas cosas por debajo de otras, ejemplo la flecha de ir arriba que queda fija en la parte de abajo del blog y al correr el blog otra imagen, un vídeo, etc.. instalada/o en la sidebar tapan la imagen de la flecha.

Generalmente esto se nota cuando hay una imagen fija o un menú con la position: fixed.

El estilo z-index de CSS crea una capa que tiene altura diferente al resto de las capas.

Una capa posee una posición, estas capas sólo funcionan si se le específica la posición.

z-index sólo funciona con objetos que tengan la propiedad position como: relative, fixed o absolute.

Las capa z-index tienen un valor automático, por defecto es 0, a menos que se le asigne otro valor.

Si no se ha puesto un valor para z-index, las capas se apilan en el siguiente orden: desde más abajo hacia arriba, o del primero al ultimo.

Si se asigna un valor, las capas se apilan desde el menor valor al mayor.

Una capa con z-index: 5 se vera por arriba de una capa con z-index 4.

Si 2 capas tienen el mismo valor z-index la capa que queda por encima es el que está último en el HTML.

Azul 1

Amarillo 2

Rojo 3

Negro 4

Ver ejemplos cambiando el z-index de las capas.

Azul z-index: 0 Azul z-index: 1 Azul z-index: 2 Azul z-index: 3 Azul z-index: 4 Azul z-index: 5

Amarillo z-index: 0 Amarillo z-index: 1 Amarillo z-index: 2 Amarillo z-index: 3 Amarillo z-index: 4 Amarillo z-index: 5

Rojo z-index: 0 Rojo z-index: 1 Rojo z-index: 2 Rojo z-index: 3 Rojo z-index: 4 Rojo z-index: 5

Negro z-index: 0 Negro z-index: 1 Negro z-index: 2 Negro z-index: 3 Negro z-index: 4 Negro z-index: 5