z-index CSS ¿no funciona? Superposición de elementos tipo capas, objetos, div o imágenes (CU01039D)

Resumen: Entrega nº39 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01039D

 

 

PROPIEDAD Z-INDEX

Hasta ahora hemos hablado del posicionamiento de elementos en el plano de la pantalla de visualización y en dos direcciones: horizontal (x) y vertical (y). CSS permite, aunque con algunas limitaciones, gestionar la posición en la vertical (eje z) de modo que dados dos elementos superpuestos se pueda indicar cuál debe mostrarse encima y cuál debajo.

css

 

PROPIEDAD CSS z-index

Función de la propiedad

Permite definir cómo se colocan unos elementos encima de otros.

Valor por defecto

auto

Aplicable a

Elementos con posición establecida explícitamente.

Valores posibles para esta propiedad

auto (no hay z-index especificado)

Un número entero (el elemento está más próximo al usuario cuanto mayor sea el valor de su z-index; se admiten números negativos).

inherit (se heredan las características del elemento padre).

Ejemplos aprenderaprogramar.com

#content1 {z-indez: 22;}

.elementoJukeBox {z-index:0;}

 

 

Es importante destacar que z-index no vale para superponer contenidos a nuestro antojo, ya que sólo funciona cuando se cumplen determinadas condiciones.

En el caso de un elemento “A” cuyo contenido (texto) se sale de su contenedor y se superpone con otro elemento “B” situado con posterioridad en el código HTML, el texto quedará por debajo del elemento “B” debido al orden del código. La propiedad z-index no funcionará ya que ni siquiera se trata de una superposición entre elementos, sino del texto desbordado de uno con el contenedor de otro.

En el caso de un elemento “A” posicionado y otro “B” no posicionado, no podrá establecerse el orden en el eje z usando z index ya que ambos elementos tendrían que estar posicionados para responder a z-index.

En el caso de elementos situados dentro de cajas contenedoras, su valor de z-index se establece en relación a la caja contenedora. Supongamos que una caja “A” tiene posición y z-index 10 y dentro de ella hay una caja “B” con posición y z-index “20”. Otra caja “C” tiene posición y z-index 15. Si las cajas A, B y C se superponen ¿En qué orden se muestran? Se mostrará la caja C en posición superior (por tener z-index 15 frente al valor 10 de la otra caja en su mismo nivel) y debajo la caja A (con la caja B en su interior). La caja B es hija de la caja A por lo que su z-index es relativo a su padre, no puede compararse con otras cajas que no estén en su mismo nivel.

Crea un documento HTML con este contenido:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01039DA.css">
</head>
<body>
<div id="caja1">Caja 1 Aprender</div>
<div id="caja2">Caja 2 a</div>
<div id="caja3">Caja 3 programar</div>
<div id ="caja4">Caja 4 . com</div>
</body>
</html>
 

 

Y un archivo de hoja de estilos con estas reglas (pon el nombre de archivo adecuado) que nos permitirán ver el resultado antes de aplicar z-index:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:507px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
padding:7px; background-color: #FFEFD5; width:150px; height:150px; position:absolute; }
#caja1{ border-color:red; top: 55px; left: 50px;  }
#caja2{ border-color:blue; top: 25px; left: 175px; }
#caja3{ border-color:green; top: 70px; left: 200px; }
#caja4{ border-color:orange; top: 100px; left: 100px; }
 

 

Ahora añade propiedades z-index de la siguiente manera y compara los resultados de una forma y otra:

#caja1{ border-color:red; top: 55px; left: 50px; z-index:40;  }
#caja2{ border-color:blue; top: 25px; left: 175px; z-index:10;}
#caja3{ border-color:green; top: 70px; left: 200px; z-index:20 }
#caja4{ border-color:orange; top: 100px; left: 100px; z-index:0;}

z-index css

 

 

Elimina la propiedad position:absolute; para todos los div, manteniendo el resto del código igual. Si visualizas el resultado comprobarás que las propiedades top y left son ignoradas y que el posicionamiento sigue el flujo natural de elementos block en un documento. Declara ahora posición absoluta únicamente para la caja 4 con #caja4{ border-color:orange; top: 100px; left: 100px; z-index:0; position:absolute;} El resultado será que la caja 4 se superpone con las otras cajas. Sin embargo, el hecho de que la caja 4 tenga un z-index 0 y las otras cajas un z-index superior no lleva a que la caja 4 se vaya al fondo. ¿Por qué? Porque z-index sólo funciona entre elementos con posición establecida. En este caso la caja 4 tiene una posición absoluta establecida y está fuera del flujo normal del documento, mientras que las otras cajas no tienen posición establecida y están dentro del flujo normal.

Las cajas con posición absoluta se sitúan por encima de las cajas dentro del flujo normal del documento, es como si estuvieran en dos planos distintos, un plano superior para elementos con posición absoluta y un plano inferior para elementos dentro del flujo normal.

Con frecuencia se trata de aplicar z-index para elementos no posicionados, o entre elementos posicionados y no posicionados, y el resultado es que aparentemente z-index “no funciona”. z-index sí funciona, pero de acuerdo con unas reglas y limitaciones que debemos conocer para no tener quebraderos de cabeza innecesarios.

 

 

EJERCICIO

Analiza el siguiente código, visualiza su resultado y responde a las preguntas:

<html>

<head>

<title>Ejemplo aprenderaprogramar.com</title>

<meta charset="utf-8">

<style type="text/css">

*{font-family: sans-serif;}

#cajaGris { width: 225px; height: 225px; border: solid 1px #ccc; background: #ddd; margin-top:20px;}

#cajaAzul {width: 225px; height: 225px; border: solid 3px #4a7497;

background: #8daac3; margin-top: -50px; margin-left: 50px;}

#cajaOcre { width: 225px; height: 225px; border: solid 2px #8b6125;

background: #ba945d; margin-top: -50px; margin-left: 100px; margin-bottom: 20px;}

</head>

</style>

<body>

<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>

</body>

</html>
 

 

a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?

b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?

c) ¿Por qué se superponen unas cajas encima de otras? ¿En qué orden aparecen las cajas superpuestas (es decir, cuál está arriba, cuál está en posición intermedia y cuál está en el fondo)? ¿Por qué aparecen con ese orden y no otro?

d) Queremos que la caja gris se sitúe por encima del resto de cajas. ¿Qué modificaciones en el código hemos de hacer para lograr este objetivo?

e) Modifica el código para que la caja ocre quede en el fondo, la caja azul en posición intermedia y la caja gris encima.

 

Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MAYO - JUNIO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación