Z-Index… que que??

native-image-changing

Como muchos sabemos, CSS trabaja sobre tres dimensiones: Ancho, Alto y profundidad. El ancho y el alto lo manejamos, regularmente, bastante bien con el width y el height. La profundidad de los elementos la manejamos con Z-Index. Entonces… Respondemos la pregunta ¿Que es Z-Index?: Es, simple y sencillamente, el manejo de la profundidad de los elementos CSS.

¿Cómo funciona?

Supongamos que tenemos 3 divs. En este caso pondremos el #primero el #segundo y el #tercero y el #contenedor que será quien almacene a los 3.

	#contenedor {position: relative; background: #ccc;}
#primero {position: absolute; z-index: 1; background: #ff0000;}
#segundo {position: absolute; z-index: 2; background: #00ff00;}
#tercero {position: absolute; z-index: 3; background: #0000ff;}

Explico:
Usamos un contenedor con posicion relativa (position:relative;) para que los elementos absolutos tengan un limite marcado. Los elementos que usaremos para ejemplificar tienen posicion absoluta y el z-index marcado. En donde el 1 es el más profundo y 3 el más cercano.

Resultado:
z-index

En resumen, para utilizar z-index necesitas manejar bien las posiciones absolutas y relativas. Si sabes usar eso, seguramente te irá muy bien con esto. Ahora solo falta que te animes a probarlo, hacer tus ejemplos y seguir aprendiendo.

Deja un comentario