0

Tenía entendido que el posicionamiento absoluto en CSS aplicado a un elemento hijo, hace que se posicione de manera respecto al elemento padre. Pero, haciendo pruebas en CodePen, me he encontrado esto lo cual veo que posiciona al elemento hijo red respecto del elemento body y no del elemento padre que sería el container. ¿Alguien me puede explicar por qué sucede esto? Gracias.

introducir la descripción de la imagen aquí

HTML:

<body>
  <div class="container">
    <div class="red">
      
    </div>
  </div>
</body>

CSS:

body {
  margin: 0px;
  padding: 0px;
}

.container {
  width: 300px;
  height: 300px;
  background-color: grey;
}

.red {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  right: 20px;
}
4
  • 1
    En lugar de una imagen, pega tu código y así podremos probarlo y ayudarte. Cómo preguntar Commented el 15 mar. 2022 a las 11:28
  • 3
    Si el padre no tiene un posicionamiento relativo entonces toma el posicionamiento relativo en el arbol de descendencia. Si ningun ancestro lo tiene se posiciona respecto al body. Esto es, si por ej quieres pisicionar una imagen en cierto lugar encierrala en un div con posicion relative y la imagen con absolute Commented el 15 mar. 2022 a las 11:28
  • Ya añadí el código. Commented el 15 mar. 2022 a las 11:54
  • a la clase container agregale position: relative; Commented el 15 mar. 2022 a las 14:36

1 respuesta 1

1

El posicionamiento absoluto se emplea para establecer de forma exacta la posición en la que se muestra la caja de un elemento.

En pocas palabras un elemento con position: absolute; está posicionado en relación con el elemento más cercano (en lugar de posicionado en relación con la ventana gráfica, como fijo).

Al elemento padre debes de ponerle el position: relative para que el elemento con position: absolute se situé sobre el padre.

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.