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:

Concepto de herencia en CSS
- 225
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Factores que afectan al tiempo de carga de una página web
- 307
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 131
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Dimensiones reales de una caja en CSS
- 165
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 142
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 81
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 338
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Resumen de como comentar código en html, css y javascript
- 450
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Guía rápida para crear botones personalizados con CSS
- 40
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Introducción al CSS. Que significa Cascading Style Sheets.
- 173
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
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.