Layering components on pages in gatsby - html

Question

Hi I've been trying to add a navbar to my homepage. Since my navbar is going to have the same background, I would like to have the content on my homepage to stay at the exact same spot.
The issue however is that when I import my navbar, or insert anything under the class home, the content on my homepage gets squeezed down.
Hence I would like to import my navbar in a way such that it lays on top of my homepage or recenter the items on my homepage such that it takes into account the downward shift caused by the navbar.
In the example below, I would like only the class hometext to be centered
home.js:
import React from "react";
import Navbar from "../components/Navbar";
const home = () => {
return (
<>
<div className="home">
<Navbar />
<p className="hometext">Home</p>
</div>
</>
);
};
export default home;
Navbar.js:
import React from "react";
const Navbar = () => {
return <nav>This is navbar</nav>;
};
export default Navbar;
main.css
.home {
background: var(--background);
}
.hometext {
height: 100vh;
font-family: Ace Sans;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
Using an absolute position is not an option for me as the webpage as a whole uses a snap scroll feature so under the homepage there are different pages with different content. Thank you!