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>
Tema: CSS cajas contenedoras crear superposiciones elevar una encima de otra CU01039D# (Leído 3158 veces)
RSS -
WAP2