Autor Tema: Ejercicio CSS z-index control de superposición colocar div encima CU01039D  (Leído 2242 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
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:
      
   
Código: [Seleccionar]

<!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:


Código: [Seleccionar]

<!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>

« Última modificación: 15 de Marzo 2016, 12:39 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2071
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola!

Antes de enviar los mensajes al foro es conveniente que pulses el botón "Previsualizar" y lo revises. Este mensaje no ha quedado bien cuando lo enviaste, además aparecen saltos de línea incorrectos y otros problemas. Pulsa siempre el botón previsualizar, luego corrige todo lo que quede mal y vuelve a pulsar previsualizar, así hasta que lo vea bien, entonces pulsa en "Enviar"

a) b) c) d) y e) están bien


Saludos!
Responsable de departamento de producción aprenderaprogramar.com

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
ok, Cesar tienes razón no volverá a pasar le daré al botón previsualizar  y lo revisaré todo, la verdad es que  no me fijé hice el copy pega y ya está, y la verdad es que lo ves y hace daño hasta a  los ojos, por no decir la dificultad de leerlo, gracias por tu tiempo una vez más.

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