La propiedad z-index

La propiedad z-index

5
(1)

La propiedad z-index sirve para regular el orden de visualización de capas superpuestas.

Es un valor numérico que tendrá más prioridad cuanto mayor sea.

Sólo funciona con elementos que tengan algún tipo de posicionamiento (relativo, absoluto o fijo).

Veamos un ejemplo de uso.

Ejemplo de uso de z-index

A continuación mostramos el código usado par conseguir el efecto de la imagen adjunta.

Observar en particular la caja cinco.  Se le ha aplicado un background-color con transparencia (uso de rgba).

Todas las cajas tienen posicionamiento absoluto y se van desplazando en top y left de forma progresiva creciente.

La propiedad z-index 1
Ejemplo de uso de la propiedad z-index

Código html del ejemplo

<body>

	<div class="caja-1">
	
	</div>

	<div class="caja-2">
	
	</div>

	<div class="caja-3">
	</div>

	<div class="caja-4">
	</div>

	<div class="caja-5">
	<p>z-index:10</p>
	</div>

	<div class="caja-6">
	</div>

	<div class="caja-7">
	</div>

	<div class="caja-8">
	</div>

	<div class="caja-9">
	</div>

	<div class="caja-10">
	</div>

	<div class="caja-11">
	</div>

	<div class="caja-12">
	</div>

</body>

Código CSS del ejemplo

div[class|="caja"]{
		padding:10px;
		margin:10px;
		border:2px solid #666;
		max-height:200px;
		width:200px;
		background-color: #ffff00;
		position:absolute;
	}

	.caja-1{
		top:10px;
		left:10px;
	}

	.caja-2{
		top:20px;
		left:20px;
	}

	.caja-3{
		top:30px;
		left:30px;
	}

	.caja-4{
		top:40px;
		left:40px;

	}

	div.caja-5{
		top:50px;
		left:50px;
		background:rgba(00,80,00,0.4);
		z-index:10;
	}
	.caja-6{
		top:60px;
		left:60px;
	}

	.caja-7{
		top:70px;
		left:70px;
	}

	.caja-8{
		top:80px;
		left:80px;
	}

	.caja-9{
		top:90px;
		left:90px;
	}

	.caja-10{
		top:100px;
		left:100px;
	}

	.caja-11{
		top:110px;
		left:110px;
	}

	.caja-12{
		top:120px;
		left:120px;
	}

¡Hola!

Querido lector,

Espero que este resumen de la propiedad z-index; te sea de utilidad.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 1

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment