Quiero que un objeto caiga del cielo mientras me desplazo hacia abajo en la página. La idea es: tienes el object div sin moverse. Debería estar en el centro de la página (50 px desde la parte superior de su padre) y cuando te desplazas hacia abajo también debería desplazarse hacia abajo.

¿Cuál es el truco? El object está en otro div. Solo quiero que object sea visible dentro de este div. Así que no en todo el sitio web.

¿Qué he probado? 1: Posicionamiento fijo, pero luego aparece en entire page, z-index no funciona con fixed. 2: Relative posicionamiento en parent y absolute en el niño, pero luego object div no baja en la página cuando me desplazo.

Representación visual :: ingrese la descripción de la imagen aquí

Al desplazarse hacia abajo: ingrese la descripción de la imagen aquí

Componente de reacción:

<div className="container">
      <div className="container--object">
          <img src={object}/>
      </div>
</div>

CSS

.container {
  min-height: 100vh;
  position: relative;
}

.container--object {
  position: absolute;
  top: 50px;
}

Mi componente principal es la página de inicio. Y las siblings de este componente de reacción son otras div's. La funcionalidad para hacer que el div se mueva hacia abajo en la página es con lo que estoy luchando, ¿cómo puedo mover el object div hacia abajo? ¿Hay alguna forma de basarlo en la parte superior del navegador?

1
Otto 2 oct. 2019 a las 15:35

1 respuesta

La mejor respuesta

Ok, si entendí bien, ¿quieres algo como esto? Usé una imagen y un texto de prueba.

.container {
  min-height: 100vh;
  height: 2500px;
  position: relative;
}

.container_object {
  position: fixed;
  top: 50px;
}
<div class="container">
      <div class="container_object">
          <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
      </div>
      <div style="position: absolute; top:500px">
        TEEEEEEEEEEEEST 111111111
      </div>
      
      <div style="position: absolute; top:800px">
        TEEEEEEEEEEEEST 222222222
      </div>
</div>

Debería ver este fragmento en la página completa.

2
alesssz 2 oct. 2019 a las 13:18