HTML CSS Navbar stays at bottom of content unintentionally-CodePudding

I'm currently making a navbar for my school's NJROTC program. However, when I add content, the content goes above the navbar, even though it's position is fixed and it's top position is set to 0px.

Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKHS NJROTC - Dashboard</title>

    <link rel="stylesheet" href="src/styles/root.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
    <header>
        <nav>
            <div >
                <h1 >NJ<span>ROTC</span></h1>
                <div >
                    <a href="#" rel="noopener noreferrer"  aria-label="Issues Link" title="Issues">Issues</a>
                    <a href="#" rel="noopener noreferrer"  aria-label="Promotions Link" title="Promotions">Promotions</a>
                    <a href="#" rel="noopener noreferrer"  aria-label="Events Link" title="Events">Events</a>
                    <a href="#" rel="noopener noreferrer"  aria-label="Create a new issue, promotion request, or event." title="Create an issue, event, or promotion request.">Create</a>
                </div>
            </div>
            <div >
                <div >
                    <span >apps</span>
               </div>
                <div ></div>
            </div>
        </nav>
        <span >Charlie Company » Red Platoon » Promotions</span>
    </header>
    <main>
        lorem
    </main>
</body>
</html>

src/styles/root.css

@import "./modules/navigation.css";
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;600&family=Orbitron:wght@500&display=swap');

:root {
    --accent-color: navy;
    --heading-font-families: 'Orbitron', monospace, sans-serif;
    --body-font-families: 'Jura', Arial, sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
}

src/styles/modules/navigation.css

nav {
    font-family: var(--heading-font-families);
    text-transform: uppercase;

    padding: 5px;
    border-bottom: 2px solid #CECECE;
    padding: 0rem 1rem 0rem 1rem;

    display: flex;
    align-items: center;

    position: fixed;
    top: 0px;
    justify-content: space-between;

    height: 5rem;
    width: 100%;
}

nav .nav-left {
    display: flex;
    justify-content: left;
    gap: 25px;
    align-items: center;
}

nav .nav-left .nav-left__brand {
    flex: 1;
    font-size: 30px;
}

nav .nav-left .nav-left__brand span {
    color: var(--accent-color);
}

nav .nav-left .nav-left__links {
    flex: 2;
    display: flex;
    gap: 25px;
}

nav .nav-left .nav-left__links .nav-link {
    text-decoration: none;
    margin-top: 7px;
    color: var(--accent-color);
}

nav .nav-left .nav-left__links .nav-link:hover {
    border-bottom: 1px solid var(--accent-color);
}

nav .nav-left .nav-left__links .nav-button {
    padding: 7px;
    background-color: var(--accent-color);
    color: white;
    text-decoration: none;
}

header span.directory {
    text-transform: uppercase;
    font-family: var(--heading-font-families);
    color: #CECECE;
    font-size: 12px;
}

I can't figure out my problem. Is it something I simply overlooked? Thanks.

Current:

Currently, content in the header (not styled) and other page content in other sections are appearing above the navbar.
image of current page

Expected:

Content not inside nav tag appear below navigation content, and have navbar stay at top of page.
expected result

Thanks in advance!

CodePudding user response：

it's position is fixed and it's top position is set to 0px.

That's actually the problem, why did you make it fixed? Removind those 2 lines fixed the problem.

@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;600&family=Orbitron:wght@500&display=swap');

:root {
    --accent-color: navy;
    --heading-font-families: 'Orbitron', monospace, sans-serif;
    --body-font-families: 'Jura', Arial, sans-serif;
}

body {
    margin: 0px;
    padding: 0px;
}

nav {
    font-family: var(--heading-font-families);
    text-transform: uppercase;

    padding: 5px;
    border-bottom: 2px solid #CECECE;
    padding: 0rem 1rem 0rem 1rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 5rem;
    width: 100%;
}

nav .nav-left {
    display: flex;
    justify-content: left;
    gap: 25px;
    align-items: center;
}

nav .nav-left .nav-left__brand {
    flex: 1;
    font-size: 30px;
}

nav .nav-left .nav-left__brand span {
    color: var(--accent-color);
}

nav .nav-left .nav-left__links {
    flex: 2;
    display: flex;
    gap: 25px;
}

nav .nav-left .nav-left__links .nav-link {
    text-decoration: none;
    margin-top: 7px;
    color: var(--accent-color);
}

nav .nav-left .nav-left__links .nav-link:hover {
    border-bottom: 1px solid var(--accent-color);
}

nav .nav-left .nav-left__links .nav-button {
    padding: 7px;
    background-color: var(--accent-color);
    color: white;
    text-decoration: none;
}

header span.directory {
    text-transform: uppercase;
    font-family: var(--heading-font-families);
    color: #CECECE;
    font-size: 12px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SKHS NJROTC - Dashboard</title>

    <link rel="stylesheet" href="src/styles/root.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
<body>
    <header>
        <nav>
            <div >
                <h1 >NJ<span>ROTC</span></h1>
                <div >
                    <a href="#" rel="noopener noreferrer"  aria-label="Issues Link" title="Issues">Issues</a>
                    <a href="#" rel="noopener noreferrer"  aria-label="Promotions Link" title="Promotions">Promotions</a>
                    <a href="#" rel="noopener noreferrer"  aria-label="Events Link" title="Events">Events</a>
                    <a href="#" rel="noopener noreferrer"  aria-label="Create a new issue, promotion request, or event." title="Create an issue, event, or promotion request.">Create</a>
                </div>
            </div>
            <div >
                <div >
                    <span >apps</span>
               </div>
                <div ></div>
            </div>
        </nav>
        <span >Charlie Company » Red Platoon » Promotions</span>
    </header>
    <main>
        lorem
    </main>
</body>
</html>