Why is content of h1 overlapping static header when using fixed position?

Question

Issue

Content of h1 is overlapping navbar component that has the position fixed property, instead of going "under" and disappearing.

Information

I have a Navbar.vue component that looks like this:

<template>
    <nav>
        <ul>
            <li>
                <img id="nuxticon" src="../assets/nuxt-icon.png" alt="nuxticon">
            </li>
            <li>
                <img id="nuxttext" src="../assets/nuxtjs-typo.svg" alt="nuxttext">
            </li>
            <li>
                <NuxtLink to="/docs">Udforsk</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/about">Om os</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/field">Tilføj restaurant</NuxtLink>
            </li>
            <li>
                <NuxtLink to="/damage">Kontakt</NuxtLink>
            </li>
        </ul>
    </nav>
</template>

<style>


nav {
    position: fixed;
    box-shadow: 0 1px 3px -3px gray;
    width: 100vw;
    height: 8vh;
    top: 0;
    z-index: 20;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}


nav ul li {
    display: flex;
    align-items: center;
}


a {
    font-size: 1.5vh;
    margin-left: 2vw;
    text-decoration: none;
    color: #2F495E;
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
}

#nuxttext {
    height: 3vh;
    width: 10vw;
    margin-right: 8vw;
}

#nuxticon {
    height: 5vh;
    margin-right: 0.5vw;
}

a:hover {
    color: #08C792;
}

</style>

And an index.vue page that has the following content:

<template>
  <div class="container">
    <h1>This text is on top of the navbar when scrolling</h1>
    <h1>This text is on top of the navbar when scrolling</h1>
    <h1>This text is on top of the navbar when scrolling</h1>
    <h1>This text is on top of the navbar when scrolling</h1>
  </div>
</template>

<script>
export default {}
</script>

<style>

html, body {
    margin: 0;
    padding: 0;
}

h1 {
    color: #2F495E;
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    text-align: center;
    margin-top: 8vh;
    z-index: 0;
}

</style>

And here is the issue I see when scrolling:

Attempt at a solution

As I looked at other threads the common solution was to set the z-index of the navbar to a higher value so it would go in the foreground, while the h1 would be in the background. As you can see in the code, I have the z-index of the h1 set to 0 and in the index.vue and the z-index of the nav set to 20 in the Navbar.vue component.

Answer 1

Add a background: white to your navbar element.

The reason why you're still able to see the text, is because your navbar element background is transparent. because of that, it will show everything that is behind the element.