0

Tengo un div padre con position "relative", dentro de él tengo un div hijo con position "absolute" para posicionarlo libremente dentro de los límites del div padre y dentro del div hijo tengo otro div que vendría a ser el div nieto, lo que quiero hacer es que el div nieto tenga position "fixed" para que quede estático dentro del div hijo pero al hacerlo sale de las coordenadas y toma el posicionamiento respecto a la ventana o navegador.

Me gustaria saber cómo corregir este error, pues el div nieto tiene que ser estático(fixed) dentro del div hijo tomando el posicionamiento y coordenadas del div hijo.

.padre{
  position:relative;
} 

.hijo{
  position:absolute;
  top:0;
  left:0;
}

.nieto{
 position:fixed;
 top:0;
 left:0;
}
2
  • ¿Podrías elaborar un poco lo que estás buscando? No se entiende la parte de "estático" del div nieto. ¿Estás buscando hacer un efecto tipo parallax? Commented el 7 nov. 2023 a las 21:21
  • @DanielRodríguezMeza No, en realidad el div nieto vendria a ser un menu dentro del div hijo, entonces al desplazarme hacia abajo con el scroll de la ventaja hijo quiero que ese menu quede fijo(fixed)
    – Eduardo
    Commented el 7 nov. 2023 a las 21:25

1 respuesta 1

0

Por defecto, position: fixed; se elimina del flujo normal de tus elementos y se coloca en relación a tu navegador. Es por ello que no se moverá con respecto a ningún div que lo contenga.

Sin embargo, puedes utilizar position: sticky;, que básicamente hace casi lo mismo que el anterior mencionado, pero este se "pega" a su contenedor más próximo y se mueve en función de este. Ver más aquí

Y así quedaría tu código aplicando esta propiedad:

.main-div{
  height: 2000px;
  width: 100%;
}   

.padre{
  position:relative;
  background-color: gray;
  height: 500px;
  width: 100%;
} 

.hijo{
  position:absolute;
  top:0;
  left:0px;
  background-color: yellow;
  height: 300px;
  width: 300px;
}

.nieto{
  position: -webkit-sticky; /* Safari */
  position:sticky;
  top:0;
  left:0;
  background-color: red;
  height: 20px;
  width: 100%;
}
<div class="main-div">
  <div class="padre">
      <div class="hijo">
          <div class="nieto"></div>
      </div>
  </div>
</div>

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.