La propiedad z-index

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

La propiedad z-index 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 2
[vc_custom_heading text=»Código html del ejemplo» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

<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>

[vc_custom_heading text=»Código CSS del ejemplo» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]

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!

Deja una respuesta

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