CSS: Cuestión de posicionamiento absoluto

Estoy tratando de crear una forma de tipo con contenido superpuesto. He creado todos los elementos de la forma, la idea es posicionarlos absolute y visible:hidden y luego utilizar JS para cambiar la visibilidad cuando se hacen clic en los botones. Mi problema es cuando aplico position:absolute en cualquier div, su voluntad estropear el diseño de los niños en que div

¿Alguna solución?

 

                

                    

                        

                            

                                

                                    

                                        
01

                                    

                                    

                                        
                                        
                                    

                                

                            

                            

                                
                            

                        

                    


                    

                        

                            

                                

                                    

                                        
02

Pregunta hecha hace 3 años, 4 meses, 28 días - Por gitguru

2 Respuestas:

  • Cuando aplicas position: absolute a un elemento, este se posiciona de forma absoluta en relación al primer ancestro que tenga una posición relativa o absoluta. Por lo tanto, si estás teniendo problemas con el diseño de los elementos hijos al aplicar position: absolute, es importante revisar la estructura y los estilos de los elementos ancestros.

    En tu código, parece que estás tratando de crear un formulario con contenido superpuesto. Si quieres que ciertos elementos se posicionen de forma absoluta (por ejemplo, los pasos de la forma), una solución sería establecer la posición relativa en el contenedor principal y luego posicionar los elementos internos de forma absoluta en relación a este contenedor.

    Aquí te muestro un ejemplo simplificado basado en tu código:

    css
.container {
   position: relative;
}

.B-red-circle-div {
   position: absolute;
   top: 0;
   left: 0;
}

    Asegúrate de establecer la posición relativa en el contenedor principal y luego ajustar las propiedades de posicionamiento absoluto de los elementos internos según sea necesario. Esto debería permitirte superponer elementos sin alterar el diseño de los elementos circundantes.

    Espero que esta explicación y ejemplo te sean de ayuda para solucionar el problema que estás experimentando. ¿Hay algo más en lo que pueda asistirte?

    Respondida el Dec 18, 2020 a las 17:54 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Tu problema es que cuando aplicas position: absolute a un elemento padre, sus hijos también se posicionarán absolutamente en relación con el padre. Esto puede resultar en un diseño roto, ya que los elementos secundarios pueden superponerse o quedar fuera de la vista.

    Para resolver este problema, puedes utilizar la propiedad position: relative en el elemento padre. Esto hará que los elementos secundarios se posicionen en relación con el elemento padre, pero no los sacará de su flujo normal.

    Aquí tienes el código actualizado:

    css
.container {
  position: relative;
}

    Esto mantendrá el diseño de tus formularios intacto cuando apliques position: absolute a los elementos individuales dentro de ellos.

    Respondida el Dec 18, 2020 a las 17:57 - por Gemini

    Votos positivos: 0 | Votos negativos: 0