I'm having CSS position issues between two different components - css

Question

I'm having an issue getting my nav bar to pass over the content of my hero and title text. The background image will pass beneath my nav bar as desired, along with any further text that I add. But the title text and button pass over the bar. I think it has something to do either with their positions (absolute), or their z-indeces. I've tried manipulating these, but to undesirable effect. Changing the h1's position to fixed or relative completely distorts its placement. The nav bar should remain fixed at the top and everything should pass beneath it. Can anyone help me with this?
Here is my code:
navbar.js:
import { useState } from "react";
import styles from "../component-css/navbar.module.css";
import { GiHamburgerMenu } from "react-icons/gi";
const NavBar = (props) => {
return (
<div className={styles.canvas}>
<div className={styles.container}>
<div className={styles.buttonContainer}>
<a className={styles.navButton} href="#">
Home
</a>
</div>
<div className={styles.buttonContainer}>
<a className={styles.navButton} href="#">
About
</a>
</div>
<div className={styles.buttonContainer}>
<a className={styles.navButton} href="#">
Contact
</a>
</div>
<div>
<div className={styles.void} />
</div>
<div className={`${styles.buttonContainer} ${styles.menu}`}>
<span className={styles.navButton}>
<GiHamburgerMenu />
</span>
</div>
</div>
{
props.logo
? <img className={styles.logoSticky} src="/MegaManLogo.png" alt="Mega Man Logo" />
: null
}
</div>
);
};
export default NavBar;
navbar.module.css:
.canvas {
position: absolute;
}
.container {
display: grid;
width: 100%;
position: fixed;
top: 0;
grid-template-columns: repeat(3, .2fr) 1.3fr .25fr;
grid-template-rows: .08fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
height: 25px;
background: rgb(14, 14, 175);
/* box-shadow: 0px 2px 0px rgba(94, 94, 94, 0.5); */
overflow: hidden;
}
.buttonContainer {
background: transparent;
height: inherit;
width: 100%;
text-align: center;
overflow: hidden;
transition-duration: 0.5s;
}
.buttonContainer:hover {
background:rgb(109, 109, 216);
}
.navButton {
background: transparent;
color: white;
text-decoration: none;
transition-duration: .5s;
line-height: 1.5rem;
font-family: sans-serif;
font-size: .7rem;
margin-top: 50%;
}
.menu {
font-size: 1rem;
line-height: 1.7;
transform: translateX(20px);
}
.menu:hover {
background: transparent;
}
.logoSticky {
margin-left: 44vw;
margin-top: -100vh;
position: sticky;
width: 10vw;
height: auto;
z-index: 30;
transform: translateY(23px);
}
hero.js:
import { useState, useEffect } from 'react';
import styles from "../component-css/hero.module.css"
import { GiHamburgerMenu } from 'react-icons/gi'
const Hero = () => {
const [scrollPosition, setScrollPosition] = useState(0);
const handleScroll = () => {
const position = window.pageYOffset;
setScrollPosition(position);
};
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<div className={styles.parent}>
<div className={styles.heroBox} />
<div className={styles.blackOverlay} />
<img className={scrollPosition < 63 ? styles.logo : styles.logoSticky}
src="/MegaManLogo.png"
alt="Mega Man Logo"
/>
<div className={styles.headerBox}>
<h1 className={styles.h1}>
A Brief History of the <span className={styles.blueBomber}> Blue Bomber</span>
</h1>
</div>
<button
className={styles.gamesButton}
>
See the Games
</button>
</div>
)
}
export default Hero
hero.module.css:
.parent {
position: relative;
}
.blackOverlay {
box-sizing: border-box;
height: 100vh;
width: 100vw;
margin: 0;
margin-top: -100vh;
padding: 0;
background: rgba(0, 0, 0, 0.705);
max-width: 100%;
overflow: hidden;
z-index: 10;
}
.heroBox {
box-sizing: border-box;
overflow-y: hidden;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
background-image: url("../images/hero-background.jpg");
background-size: 100vw auto;
background-repeat: no-repeat;
max-width: 100%;
overflow: hidden;
z-index: 1;
}
.logo {
position: absolute;
width: 40vw;
height: auto;
margin-left: 30vw;
margin-top: -85vh;
z-index: 30;
transition-duration: 0.5s;
}
.logoSticky {
margin-left: 44vw;
margin-top: -100vh;
position: fixed;
width: 10vw;
height: auto;
z-index: 30;
transition-duration: 0.5s;
}
.headerBox {
position: absolute;
margin: 0px;
margin-top: 8vh;
margin-left: 30vw;
margin-bottom: 0px;
padding-bottom: 5px;
top: 45vh;
border-bottom: 2px solid rgb(122, 112, 255);
z-index: 20;
}
.h1 {
color: white;
font-family: Arial Narrow, sans-serif;
font-weight: 100;
font-size: 1.7em;
}
.blueBomber {
color: rgb(122, 112, 255);
font-family: Arial Narrow, sans-serif;
font-weight: 400;
float: right;
margin-left: 6px;
}
.gamesButton {
position: absolute;
top: 67vh;
left: 43.5vw;
padding: 7px;
font-family: Arial Narrow, sans-serif;
font-weight: 100;
font-size: 16px;
color: rgb(122, 112, 255);
background: transparent;
border: 2px solid rgb(122, 112, 255);
border-radius: 200px;
cursor: pointer;
transition-duration: 0.3s;
z-index: 20;
}
.gamesButton:hover {
background: rgb(122, 112, 255);
border: 3px solid rgb(122, 112, 255);
color: white;
}
.listItem {
display: inline-block;
margin-top: 5px;
font-size: 14px;
border-bottom: 2px solid transparent;
transition-duration: 0.5s;
text-align: center;
}
.listItem:hover {
color:rgb(122, 112, 255);
border-bottom: 2px solid rgb(122, 112, 255);
}
App.js:
import './App.css';
import Hero from './components/hero.js'
import NavBar from './components/navbar.js'
import styles from './component-css/App.module.css'
function App() {
return (
<div className="App">
<div className={styles.nav}><NavBar logo={false} /></div>
<div className={styles.body}><Hero /></div>
<div style={{height: "100vh"}} />
</div>
);
}
export default App;
App.module.css:
.nav {
position: absolute;
width: 100%;
z-index: 10;
}
.body {
z-index: 1;
}