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.
|
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;}
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 hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
