Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Dimitar Stefanov en 15 de Enero 2016, 17:46
-
Respuestas para el ejercicio CU01039D del curso CSS desde cero.
A)
Hay 3 cajas contenedoras que todas ellas están identificadas por id.
B)
El grosor de la caja azul es de 3px y está establecido en unidades: píxeles.
C)
Las cajas se superponen, porque el navegador lee el código por su orden normal. Primero está entrada la caja gris, después la caja azul y al final la caja ocre. Se superponen, porque la caja azul, mediante las propiedades de margin entra en el espacio de la caja predecesora y a su vez la caja ocre entra en el espacio de la caja azul por la misma razón. Así que, mediante el código HTML del ejercicio, está encima la caja ocre, luego la caja azul y al final la caja gris.
D)
Para que la caja gris se sitúe por encima de las demás cajas, tan sólo tenemos que posicionarla en distinta dimensión. Esto lo conseguimos con posicionarla añadiendo a sus propiedades la siguiente propieda: #cajaGris {position: relative;}. El código HTML quedará de la siguiente manera:
<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;
}
#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;
}
</style>
</head>
<body>
<div id ="cajaGris">Caja gris</div>
<div id ="cajaAzul">Caja azul</div>
<div id ="cajaOcre">Caja ocre</div>
</body>
</html>
E)
Código HTML:
<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: 1;
}
#cajaAzul {
width: 225px;
height: 225px;
border: solid 3px #4a7497;
background: #8daac3;
margin-top: -50px;
margin-left: 50px;
position: relative;
}
#cajaOcre {
width: 225px;
height: 225px;
border: solid 2px #8b6125;
background: #ba945d;
margin-top: -50px;
margin-left: 100px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id ="cajaGris">Caja gris</div>
<div id ="cajaAzul">Caja azul</div>
<div id ="cajaOcre">Caja ocre</div>
</body>
</html>
-
Buenas dimiste
Pregunta a) Correcto
Pregunta b) Correcto
Pregunta c) Correcto (hay superposición porque se establecen propiedades de margin negativas y esto da lugar a que un div se desplace superponiéndose con otro)
Pregunta d) Correcto. Al establecer relative su z-index es superior al de los otros div. Podemos hacerlo explícito escribiendo
position: relative;
z-index:10
Pregunta e) Correcto
Salu2