z-index CSS ¿no funciona? Superposición de elementos tipo capas, objetos, div o imágenes (CU01039D)
Aquí dejo el código, mas adelante dejare las preguntas con sus respuestas:
<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>
1) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?
R= Existen tres cajas contenedoras identificadas por id.
2) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?
R= La caja azul tiene un borde de 3 píxeles.
3) ¿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?
R= Porque su posición y tamaño hace que interfieran entre si y algunos tendrán que superponerse. La caja ocre esta encima, la caja azul esta detrás de ocre un poco para arriba, y la caja gris esta detrás de la caja azul. Aparecen en ese orden porque en ese mismo orden fue escrito el código.
4) 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?
R= Se le coloca a cada caja un atributo position con el valor relative, se le coloca un z-index a las demás cajas con un valor definido y a la caja gris se le coloca un valor mayor.
5) 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.
R= Aquí el código resultante:
<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;position: relative; z-index: 2;}
#cajaAzul {width: 225px; height: 225px; border: solid 3px #4a7497;
background: #8daac3; margin-top: -50px; margin-left: 50px;position: relative; z-index: 1;}
#cajaOcre { width: 225px; height: 225px; border: solid 2px #8b6125;
background: #ba945d; margin-top: -50px; margin-left: 100px; margin-bottom: 20px;position: relative; z-index: 0;}
</head>
</style>
<body>
<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>
</body>
</html>
Tema: CSS y HTML Z-index preguntas orden en superposiciones Ejemplo Ejercicio CU01039D (Leído 2380 veces)
RSS -
WAP2