Buenas noches amigos aquí os dejo el ejercicio para ver que tal esta, como siempre muchas gracias por vuestro tiempo , me estáis ayudando mucho y estoy aprendiando mucho.
muchas gracias por todo
saludos
Ejercicio CU01039D, analiza el código anterio y responde a las siguientes preguntas:
a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class?
Respuesta:
Hay 3 cajas contenedoras y estan identificadas por id.
b) ¿Cuál es el grosor del borde de la caja azul y en qué unidades está expresado?
Respuesta:
El grosor es de 3 y está expresado 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?
Respuesta:
Las cajas se superponen porque el navegador establece el orden normal. Hay superposición porque se establecen margin
negativos y esto hace que un div se desplace superponiendose uno encima de otro. primero está la caja gris, segunda la caja
azul y tercera la caja ocre. Se superponen por las propiedades margin hacen que entren una dentro de la otra; así mediante
el código HTML, está encima la caja ocre, luego la caja azul, y al final la caja gris.
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?
Respuesta:
Para que la caja gris se situe encima de las demas solo tenemos que colocarla en distinta dimensión, y esto lo conseguimos
posicionandola añadiendole las propiedades #cajagris{z-index: 10; position: absolute;}. El código HTML quedará de esta manera:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="z-index control de superposición de elementos como capas, div, o imágenes">
<meta charset="utf-8">
<title>Ejemplo Aprenderaprogramar.com</title>
<style type="text/css">
*{font-family: sans-serif;}
#cajagris{
width:225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top: 20px;
z-index: 10;
position: absolute;
}
#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:
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web - Aprenderaprogramar.com">
<meta name="keywords" content="z-index control de superposición de elementos como capas, div, o imágenes">
<meta charset="utf-8">
<title>Ejemplo Aprenderaprogramar.com</title>
<style type="text/css">
*{font-family: sans-serif;}
#cajagris{
width:225px;
height: 225px;
border: solid 1px #ccc;
background: #ddd;
margin-top: 20px;
z-index: 1;
position: relative;
}
#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: Ejercicio CSS z-index control de superposición colocar div encima CU01039D (Leído 3408 veces)
RSS -
WAP2