Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: la propiedad z-index

Datos de búsqueda

CSS: la propiedad z-index

Artículo obsoleto: He publicado una nueva versión con una explicación más clara y con algunos errores corregidos.

Actualizado 2009-03-02: Se añade comentario acerca de la peculiaridad de Internet Explorer con z-index.

La propiedad z-index sirve para especificar el orden de los elementos en el eje z, o dicho de otra forma, que elementos van encima de otros.

Solamente funciona cuando se ha definido en la misma regla la propiedad position, con los valores absolute o relative.

Valores de la propiedad z-index:

  • auto: la posición asignada por defecto.
  • numérico: en este caso el valor es un número entero, todo lo grande que se quiera, que podrá ser positivo o negativo.

Para que un elemento quede por encima de otro, el valor de su z-index ha de ser mayor.

Un ejemplo:

div#capa1 {position:relative;z-index:1;}
div#capa2 {position:absolute;z-index:3;}

En el ejemplo hay dos capas. Puesto que la segunda (div#capa2) tiene un valor de z-index mayor que la primera (div#capa1) será esa la que quede por encima.

Internet Explorer 6 y 7

Internet Explorer solo respeta la propiedad z-index si ambos elementos están bajo el mismo contenedor y al mismo nivel.

Enlaces relacionados

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 8 comentarios a “CSS: la propiedad z-index”

Anonymous dice:

Fecha de comentario: 2007/08/29 11:00

Interesante blog!

quedas agregado a marcadores

Saludos!!

Fabian dice:

Fecha de comentario: 2009/02/28 05:48

buenisimo, es lo que andaba buscando

Anonymous dice:

Fecha de comentario: 2009/05/06 16:04

Excelente, muy clara la explicacion,
Agregado a marcadores!!.

Hernán dice:

Fecha de comentario: 2010/04/06 23:47

Excelente,lo estaba buscando para un diseño =) ,muchas gracias!

majo dice:

Fecha de comentario: 2010/08/15 09:10

(Y) graaciasss

keli dice:

Fecha de comentario: 2012/02/10 18:14

tengo 2 div uno con z-index 1 y el otro z-index 2 ahora quiero que el div que tiene z-index 2 este centrado siempre ya sea que minimize o maximize la ventana de mi navegador.

Dourden dice:

Fecha de comentario: 2012/04/04 12:26

El problema sigue siendo explorer 6 y 7 cuando los elementos no estan en el mismo contenedor. ¿Conoces algún hack o solución para ello?

nada dice:

Fecha de comentario: 2012/04/04 12:28

Hay un enlace al principio del artículo que apunta a otro más completo…

Información del sitio