z-index

Propiedades de posicionamiento (2)

Otra propiedad interesante es z_index que define cómo deberán presentarse los elementos cuando éstos tienen la misma posición.

 z-index Indica el orden de superposición de los elementos en el caso de que coincidan en el mismo espacio. Un elemento con un número más alto siempre se posicionará encima de un elemento con menor número.
auto entero

Ejemplo:
#p1 {top: 70px; left: 140px; width: 300px; z-index:19; background-color: #666;}

#p2 {top: 30px; left: 30px; width: 300px; z-index: 1; background-color: #999;}

span.b {position: absolute; top: 96px; z-index: 72; font-weight: bold; background: #999;}

Es importante destacar que en la última regla aunque tiene el mayor z-index como es un elemento anidado dentro de párrafo, a la hora de representarlo se utilizará el z_index de su contenedor, es decir el z_index definido para el párrafo. Vea el resultado en el fichero recurso12.html