Resolución del ejercicio CU01039D del curso de programador web con CSS.
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?
Respuestas:
a) Hay tres cajas, y estan identificadas por "id".
b) El grosor del borde de la caja azul es de 3px, y esta con la unidad de pixeles.
c) Porque están solapadas, la caja ocre esta arriba, la caja azul esta intermedia y la gris en el fondo.
Aparecen con este orden porque estan establecidas los "margen-top" en valores negativos, y eso hace que se "solapen",
Tema: CSS: z-index no funciona control de superposición de elementos en web CU01039D (Leído 2067 veces)
RSS -
WAP2