1

Estoy intentando colocar dos elementos, que están dentro de un contenedor que tiene la propiedad display: flex; pero no lo consigo, y no sé si puede.

He estado probando con la propiedad opacity y con z-index. Pero nada de nada.

.flex-container {             
  display: flex;      
  justify-content: center;             
  align-items: center;
}         

#div1 {             
  width: 500px;             
  height: 500px;             
  background-color: red;         
}   

#div2 {             
  width: 250px;            
  height: 250px;             
  background-color: gold;             
  border: 1px solid #333;             
  border-radius: 20px;         
}     
<body class="flex-container">     
  <div id="div1"></div>     
  <div id="div2"></div> 
</body> 

4
  • 1
    podrías darnos un ejemplo mínimo verificable? Commented el 21 abr. 2021 a las 11:25
  • El código que tengo hecho es bastante extenso, y extraer las partes específicas de lo que necesito me resulta complejo. Igual me he explicado mal antes, solo necesito poder poner dos div, que están dentro de un contenedor flexbox, uno encima de otro
    – Hugo
    Commented el 21 abr. 2021 a las 11:53
  • 1
    El CSS depende totalmente del HTML, por lo que si no nos facilitas uno cualquier posible solución que se te de aquí es muy posible que no te sirva en tu caso específico. Te animo a que si no puedes extraer el fragmento de tu HTML que nos atañe, fabriques un caso sencillo donde podamos reproducir el error que nos mencionas.
    – phpMyGuel
    Commented el 21 abr. 2021 a las 12:19
  • <head> <style> .flex-container{ display: flex; justify-content: center; align-items: center; } #div1{ width: 500px; height: 500px; background-color: red; } #div2{ width: 250px; height: 250px; background-color: gold; border: 1px solid #333; border-radius: 20px; } </style> </head> <body class="flex-container"> <div id="div1"></div> <div id="div2"></div> </body> </html>
    – Hugo
    Commented el 21 abr. 2021 a las 13:48

1 respuesta 1

1

Lo único que necesitarías es indicar a tu .flex-container que su eje principal pase de ser el eje X para volverse el eje Y. Puedes hacer esto usando la propiedad flex-direction: column.

.flex-container {             
  display: flex;      
  justify-content: center;             
  align-items: center;
  flex-direction: column; /* Añadido para solución */
}         

#div1 {             
  width: 500px;             
  height: 500px;             
  background-color: red;         
}   

#div2 {             
  width: 250px;            
  height: 250px;             
  background-color: gold;             
  border: 1px solid #333;             
  border-radius: 20px;         
}     
<body class="flex-container">     
  <div id="div1"></div>     
  <div id="div2"></div> 
</body> 

Edit:

Releyendo la pregunta creo que lo que querías era poner el <div class='div2'> en el interior de <div class='div1'>. Para ello puedes hacer que el contenedor padre de ambos <div> tenga un position: relative para que haga de referencia a <div class='div2'> cuando le pongas un position: absolute.

El posicionamiento absoluto saca a un elemento del flujo normal de la página, que entre otras cosas provoca que dicho elemento no tenga en cuenta al resto de elementos ni estos le tengan en cuenta a él. De esta manera puedes hacer que un elemento esté sobre otro.

.flex-container {             
  display: flex;      
  justify-content: center;             
  align-items: center;
  position: relative; /* Añadido para solución */
}         

#div1 {             
  width: 500px;             
  height: 500px;             
  background-color: red;         
}   

#div2 {             
  width: 250px;            
  height: 250px;             
  background-color: gold;             
  border: 1px solid #333;             
  border-radius: 20px;  
  position: absolute; /* Añadido para solución */
}
<body class="flex-container">     
  <div id="div1"></div>     
  <div id="div2"></div> 
</body>

1
  • Muchas gracias. La segunda opción que me has dado era lo que buscaba (igual no me he explicado bien). Genial!! No entiendo exactamente el comportamiento de los position: relative y position: absolute, pero voy a revisar bien el código para ver porqué actúan así.
    – Hugo
    Commented el 21 abr. 2021 a las 15:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.