La propiedad z-index

La propiedad z-index

Print Friendly, PDF & Email
La propiedad z-index
Valora esta entrada

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.

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!

Entradas relacionadas:

Ejercicio sobre selectores css (III)
- 67
Ejercicio css en que dadas varias propuestas de selectores se pide escribir para que html serviría. Incluye solución.
Ejemplo de centrado vertical y horizontal con CSS
- 155
Ejemplo explicado sobre como centrar verticalmente y horizontalmente una caja dentro de otra mediante position relative y absolute.
Ejercicio sobre la propiedad clear:both (float)
- 40
Ejercicio para practicar de una forma muy visual el uso de la propiedad clear:both | left | right; de css cuando se apilan cajas mediante la propiedad float. Incluye solución.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Diferencia entre visibility:hidden; y display:none;
- 261
Código css para ilustrar la diferencia entre el uso de visibility:hidden; y display:none; . Incluye ejemplo visual.
Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 593
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
Box Sizing, como modificar el modelo de cajas convencional
- 321
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 545
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 271
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.