Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: 3skai en 05 de Diciembre 2016, 01:31
-
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
-
Hola 3skai.
a) bien.
b) bien.
c) bien.
d) En este caso con añadir la posición relativa valdría, ten en cuenta que si los demás div no tienen una posición establecida, z-index no funciona.
e) Está bien, pero has modificado más cosas de las que se pedían en el enunciado, como quitar los margin.
Te invito a que veas otras soluciones distintas a la tuya.
https://www.aprenderaprogramar.com/foros/index.php?topic=3743.msg16034#msg16034
https://www.aprenderaprogramar.com/foros/index.php?topic=5244.msg20812#msg20812
Saludos. ;D