Propiedad z-index de CSS
Hoy vamos a aclarar para que se usa la propiedad z-index
de CSS al hacer una web, ya que si la dominamos puede ser de gran utilidad a la hora de realizar estructuras complejas. Esta propiedad se usa en CSS para darle profundidad a los elementos HTML de una página web (como se trabaja por ejemplo con Photoshop). De modo que podemos superponer unos elementos encima de otros a nuestro antojo.
La implementar z-index
es sencilla: la añadimos al estilo donde queramos aplicarla, le asignamos un valor numérico (no importa cuál sea) y dependiendo del valor, se posicionarán por encima o por debajo unas de otras. De los valores más altos a los más bajos representarán el nivel de profundidad de delante hacia atrás respectivamente.
Es importante ponerle la propiedad position: absolute
a los elementos que vayan a llevar el z-index para que se encuentren en la misma posición. La sintaxis en la CSS quedaría algo así:
.elemento1 { position: absolute; z-index: 10; } .elemento2 { position: absolute; z-index: 20; } .elemento3 { position: absolute; z-index: 30; }
El elemento con la clase .elemento3 quedaría encima de todas, .elemento2 inmediatamente detrás y .elemento1 detrás de todas. Así pues, como comentamos antes, los valores en la CSS determinan la profundidad de las capas.
Publicado por Jesús Tovar
Etiquetas: maquetación web, diseño web, propiedades css
Deja una respuesta