Índice Z sin posición absoluta

Como resultado del engaño de CSS como márgenes negativos, ocasionalmente tengo algo de HTML que se representa debajo del contenido HTML que aparece más adelante en el documento HTML. A pesar de que los elementos originales técnicamente deben estar debajo de los elementos posteriores, me gustaría mostrar los elementos anteriores.

¿Es posible hacer que un elemento HTML aparezca sobre otro elemento sin tener que especificar una posición absoluta? No parece que el índice z tenga ningún efecto sin una posición absoluta.

Sí: usar position:relative; z-index:10 position:relative; z-index:10 .

z-index no tiene ningún efecto para la position:static (el valor predeterminado).

Tenga en cuenta que el índice z no es un sistema de capas global, sino que solo diferencia el orden dentro de cada padre posicionado. Si usted tiene:

  ... 
SUPER TALL
I WIN

… entonces #a1 nunca se representará por encima de b , porque #b está en capas por encima de #a . Puede ver una demostración de esto en http://jsfiddle.net/DsTeK

Sé que la respuesta de Phrogz ya ha sido aceptada, y es una buena respuesta, pero solo para el registro: no siempre se necesita z-index .

Cuando tiene la position:relative en un elemento, también se mostrará sobre todos los demás elementos que no tienen position (o position:static ). Incluso si no tienes ningún índice z en absoluto!

jsFiddle .