Autor Tema: HTML z-index css superposición de elementos colocar div encima de otro CU01039D  (Leído 2109 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Buenas noches. Este es el enunciado del ejercicio CU01039D del tutorial básico de desarrollo web con CSS desde cero:

Citar
Analiza el siguiente código, visualiza su resultado y responde a las preguntas:


Acá el código:

Código: [Seleccionar]
<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;}

#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;}

</head>

</style>

<body>

<div id ="cajaGris">Caja gris</div><div id ="cajaAzul">Caja azul</div><div id ="cajaOcre">Caja ocre</div>

</body>
</html>

Citar
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.



R.a) Hay 3 cajas contenedoras identificadas mediante id.

R.b) El grosor de la caja es de tres pixeles.

R.c)Se superponen debido a los márgenes verticales negativos que tienen establecidos las cajas azul y ocre. Dado que tales márgenes no son aditivos, se produce el solapamiento; La caja que está arriba es la ocre, la intermedia, azul y la de fondo, gris. Se muestran en ese orden porque es el establecido en el código html, por ejemplo: si se cambiara de posición algunos de los div dentro de la etiqueta body, los estilos de esos contenedores se comportarían de manera impredecible.

R.d)Se establece la propiedad position con el valor relative a la caja gris, la cual, posiciona al elemento respecto a lo que sería su posición normal y debido a que el uso del valor relative no modifica la posición de las cajas adyacentes, se produce el solapamiento. El resultado final es la visualización de la caja por encima de sus sucesoras.

En el caso de que se establezca la posición relative a las cajas intermedia azul u ocre, estas se colocarían por encima, cancelando el efecto de la posición relativa en la caja gris. Esto se evita, haciendo uso de la propiedad z-index en la regla css de la caja gris. Logrando que la caja gris quede establecida por encima de las demás cajas de una vez por todas.

e.)
Código: [Seleccionar]
<!DOCTYPE html>
<html>

<head>

<title>CU01039D</title>

<meta charset="utf-8">

<style type="text/css">

*{font-family: sans-serif;}

div{width:225px; height:225px;}

#cajaGris {position:relative; z-index:2; border: solid 1px #ccc; background: #ddd; margin-top:20px;
left:101px; top:359px; }

#cajaAzul {position:relative; border: solid 3px #4a7497;background: #8daac3; margin-top: -50px; margin-left: 50px;}

#cajaOcre {border: solid 2px #8b6125;
    background: #ba945d;  margin-top: -408px; margin-left: -2px;  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>



Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 19 de Octubre 2017, 18:22 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola EnigmaticNerd, el ejercicio está bien resuelto

Saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".