Hola, buenas noches a todos. Espero se encuentren muy bien!
Aquí la respuesta del ejercicio de la actividad CU01039D del curso de fundamentos de programación web desde cero con CSS.
Enunciado:
Analiza el siguiente código, visualiza su resultado y responde a las preguntas.
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?
R= 3 cajas, están identificadas por id.
b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?
R= 3 es el borde, esta especificado en pixeles.
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?
R= Aparecen en ese orden, por la declaración del código, lo que le da esa apariencia de superposicion es la declaración de los margin (top,left,bottom).
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?
R= Se le agrega z-index con valor de 1 para que se superposicione sobre la cajaazul, se le dan parametros de posicion relativa para que se posicione sobre las dos otras cajas.
/*CSS*/
#cajaGris {
width: 225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top:20px;
z-index:1;
position:relative;
top:280px;
left:75px;
}
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.
R=
HTML
<!DOCTYPE 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 ="cajaGris">Caja gris</div>
<div id ="cajaAzul">Caja azul</div>
<div id ="cajaOcre">Caja ocre</div>
</body>
</html>
CSS
* {font-family: sans-serif;}
div {
text-align:right;
position:absolute;
}
#cajaGris {
width: 225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
left:90px;
top:200px;
z-index:20;
}
#cajaAzul {
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
left:50px;
top:100px;
z-index:10;
}
#cajaOcre {
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
z-index:0;
}
Feliz codecember xD
Tema: HTML y CSS ¿Por qué se superponen unos div encima de otros? ¿Qué orden? CU01039D (Leído 4613 veces)
RSS -
WAP2