Tengo problemas para que mi componente Pie de página aparezca en la parte inferior de la página. Y parece que no puede ver cuál es el problema.

Aquí está mi App.js:

 import "./App.css"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import Navbar from "./components/layout/Navbar"; import Landing from "./components/layout/Landing"; import Contact from "./components/layout/Contact"; import Footer from "./components/layout/Footer"; function App() { return ( <Router> <Navbar /> <Routes> <Route path="/" element={<Landing />} /> <Route exact path="/contact" element={<Contact />} /> </Routes> <Footer /> </Router> ); } export default App;

Ahora la barra de navegación aparece en la parte superior de la página, sin embargo, el componente de aterrizaje se encuentra detrás de él (también sería excelente un consejo sobre cómo detener eso).

Dentro del componente de aterrizaje tenemos dos componentes como:

 import React from "react"; import LandingInner from "../pages/landing/LandingInner"; import LandingCards from "../pages/landing/LandingCards"; const Landing = () => { return ( <section className="landing"> <div className=" dark-overlay"> <LandingInner /> <LandingCards /> </div> </section> ); }; export default Landing;

El pie de página aparece en la parte inferior de la página al cargar la página (aparece en la pantalla), sin embargo, no quiero que aparezca en la pantalla a menos que se desplace hacia abajo y debería ser el último componente en cada página a la que vaya. . Al igual que la barra de navegación es siempre la primera.#

Aquí está el css actual para el pie de página:

 .footer { border: 5px solid black; position: absolute; left: 0; bottom: 0; right: 0; }

Espero que esto tenga sentido. Pero solo para aclarar; Quiero que el pie de página aparezca en la parte inferior de cada página (no en la pantalla) a la que voy en mi aplicación.