Tengo un código de muestra con un botón y 2 imágenes que se muestran condicionalmente. Necesito desplazarme hasta la parte superior del div de contenido, donde se muestran las imágenes pero permanece en la misma posición que el contenido anterior.

Traté de separar los botones y el contenido entre divs separados, pero no sirvió de nada. ¿Hay alguna manera de lograr esto con solo CSS?

Aquí está el código y el ejemplo de trabajo en codesandbox: https://codesandbox.io/s/upbeat-sutherland-9r0kh?file=/src/styles.css:0-206

La página:

 import { useState } from "react"; import "./styles.css"; export default function App() { const [isOpen, setIsOpen] = useState(true); return ( <div className="App"> <div className="buttonContainer"> <button onClick={() => setIsOpen(!isOpen)}>switch</button> </div> <div> {isOpen ? ( <img src="https://images.unsplash.com/photo-1574285013029-29296a71930e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" /> ) : ( <img src="https://images.unsplash.com/photo-1558064340-601a5c6ac442?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" /> )} </div> </div> ); }

CSS:

 .App { font-family: sans-serif; text-align: center; display: flex; align-items: center; } .buttonContainer { position: fixed; height: 100vh; } button { position: absolute; height: 100px; }