Buenas Buenas!!!! dejo mis respuestas y codigo al ejercicio CU01039D del tutorial CSS desde cero.
Consignas
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?
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?
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.
a) Hay 3 cajas contenedoras identificadas por id.
b) El grosor de la caja azul es 3 expresado en pixeles.
c)Están superpuestas porque se uso la propiedad margin y modificando sus valores en negativo, se logro ese efecto.
El orden de las cajas es: Ocre (arriba) Azul (intermedio) Gris (abajo)
Aparecen en ese orden, porque los navegadores siguen el flujo de código para mostrar las cajas.
d)Para que la caja gris este encima del resto, solo hay que poner propiedad position a relative.
e)Aunque en este caso no hacia falta poner todos los div con position:relative lo hice asi para "jugar un rato con los z-index". Este es el código modificado segun se pidio en el enunciado
<!DOCTYPE html>
<html lang="es">
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Clear CSS Float" />
<meta name="keywords" content="curso, aprender a programar, html, css, clear, float,(CU01036D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<style type="text/css">
*{font-family: sans-serif;}
/*div{position: relative;}*/
#cajaGris{
width: 225px;
height: 225px;
border: solid 1px #CCC;
background: #DDD;
margin-top: 20px;
z-index: 3;
}
#cajaAzul{
width: 225px;
height: 225px;
border: solid 3px #4A7497;
background: #8DAAC3;
margin-top: -50px;
margin-left: 50px;
z-index: 2;
}
#cajaOcre{
width: 225px;
height: 225px;
border: solid 2px #8B6125;
background: #BA945D;
margin-top: -50px;
margin-left: 100px;
margin-bottom: 20px;
z-index: 1;
}
</style>
</head>
<body>
<div id="cajaGris">Caja gris</div>
<div id="cajaAzul">Caja azul</div>
<div id="cajaOcre">Caja ocre</div>
</body>
</html>Saludos!!!!
Tema: z-index CSS y HTML superposición de div y orden en que aparecen fondo CU01039D (Leído 1990 veces)
RSS -
WAP2