Estilo z-index

Mediante el estilo “z-index” de CSS podemos ordenar los elementos de nuestra página web a nuestro gusto. z-index crea una capa nueva que tiene un nivel o una altura diferente al resto de las capas. Observa el siguiente código:

Lo primero que observamos es que la capa posee una posición. Y es que estas capas sólo funcionan si se le específica la posición. En este caso es absoluta, pero también podríamos haberla hecha relativa.

También vemos que la capa z-index tiene un valor, que en este caso es 1. Las capas son apiladas dependiendo del valor que tengan, siempre de mayor a menor. Por ejemplo, una capa con z-indez:2 se apilaría por encima de la capa que vimos anteriormente, que era z-indez:1.

Pincha en el siguiente enlace para acceder al ejemplo que hemos hecho nosotros y observa el código fuente para aclarar tus dudas. Ver ejemplo de z-index.

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.