CSS: Posicionar elementos con z-index

css z-index

Flickr: CSS z-index

Muchas veces queremos posicionar un elemento delante de otro, ya sea por estética o por optimizar, y no encontramos la forma de hacerlo o tiramos por el camino más fácil.

Por ejemplo, la imagen que he puesto en la cabecera del artículo, más de una vez me he encontrado con eso, una imagen. El hecho de no saber cómo superponer un bloque con otro hace que tengamos que añadir un peso extra a nuestra web.

Por eso, para quienes no sepáis como hacerlo (quienes lo sepáis ya, también podéis leer eh) os lo explico:

Con la propiedad z-index podemos calcular el posicionamiento tridimensional de un elemento, para ello lo podemos controlar añadiéndole un valor numérico a esta, ya sea positivo o negativo. Aquí debemos tener en cuenta que el elemento con el número mayor aparecerá por encima del resto.

#elemento1 { z-index:1; }
#elemento2 { z-index:0; }

Así el elemento2 aparecerá por debajo del elemento1, este sería en el ejemplo el cuadro azul.

Pero para que podamos superponer elementos debemos saber que la propiedad z-index sólo funcionará si está acompañada de las propiedades position o float, ya que son las que consiguen situar elementos de forma que se solapen en alguna parte.

Ahora sí que podemos posicionar el elemento1 por encima del elemento2:

#elemento1{
	float:left;
	margin-top:-70px;
	margin-left:30px;
	z-index:1;
}

Si aún así no os ha quedado del todo claro podéis ver el ejemplo completo, aunque cómo mejor se aprende es practicando :D

  • 15 octubre 2009
  • css

One comment on “CSS: Posicionar elementos con z-index”

  1. Pingback: Bitacoras.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *