0

Tengo un contenedor div con position: relative y dentro tengo otros dos div con position: absolute que se posiciona en la esquina inferior izquierda y esquina inferior derecha.

<div class="padre">
  <div class="hijo hijo1"></div>
  <div class="hijo hijo2"></div>
</div>
.padre{
   position: relative;
   width: 300px;
   height: 100px;
   background-color: #242526;
}

.hijo{
   position: absolute;
   width: 50px;
   height: 50px;
}

.hijo.hijo1{
   left: 0;
   bottom: 0;
   background-color: blue;
}

.hijo.hijo2{
   right: 0;
   bottom: 0;
   background-color: red;
}

Me gustaría cambiar la referencia del elemento hijo1 a body, pero sin afectar el posicionamiento del hijo2.

Cambiar el position: relative por static al padre no funciona, puesto que me rompe el posicionamiento del hijo2

¿Puedo hacerlo con jquery, o tengo que usar otra librería?

2
  • ¿Probaste si position: fixed; resuelve tu problema? Checa estas soluciones a ver si alguna te sirve. Hay unas cuantas que usan JQuery. el 9 nov. 2021 a las 3:40
  • No conocía esa propiedad, acabo de usarla y parece funcionar, Muchas gracias.
    – KrlozCJ
    el 9 nov. 2021 a las 13:28

2 respuestas 2

1

La posición absolute siempre hace referencia al contenedor padre posicionado más cercano. Como menciona Jaime Menéndez en su comentario, para que haga referencia al body, siempre puede utilizar position: fixed.

1
  • Lo intenté hace un momento y parece funcionar. Muchas gracias.
    – KrlozCJ
    el 9 nov. 2021 a las 13:33
1

Ya resolví mi problema, gracias a las respuestas. Para cambiar la posición de hijo utilizo jquery. Con jquery hago algo como esto:

$(".hijo.hijo2").click(function(){
  $(".hijo2").css({
     "position" : "fixed",
     "top" : "50%",
     "left" : "50%",
     "transform" : "translate(-50%,-50%)"
   });
});

Esto me centra el contenido referente a la ventana, espero y a alguien más le sirva. Ahora si se quiere cambiar la referencia a otro contenedor, también pude hacerlo de esta manera:

$(".hijo.hijo2").click(function(){
  $(".hijo2").appendTo("#otroPadre");
});

Sin embargo esto no es muy vistoso a la hora de hacer una animación o algo por el estilo, me tocó hacer un efecto transform: scale y asignarle una animación para que al pasarlo de un contenedor a otro, este se muestre mucho más suave, pero igual el salto al otro contenedor suele ser muy brusco.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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