Autor Tema: CSS: z-index no funciona control de superposición de elementos en web CU01039D  (Leído 1978 veces)

Jack_F

  • Visitante
Resolución del ejercicio CU01039D del curso de programador web con CSS.

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

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?

Respuestas:

a) Hay tres cajas, y estan identificadas por "id".
b) El grosor del borde de la caja azul es de 3px, y esta con la unidad de pixeles.
c) Porque están solapadas, la caja ocre esta arriba, la caja azul esta intermedia y la gris en el fondo.
Aparecen con este orden porque estan establecidas los "margen-top" en valores negativos, y eso hace que se "solapen",
« Última modificación: 18 de Junio 2017, 18:48 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS: z-index no funciona control de superposición (CU01039)
« Respuesta #1 en: 09 de Mayo 2017, 11:00 »
Hola Jorgito.

Tus respuestas son correctas.

Saludos.  ;D

 

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