Css Navbar behind the content (z-index doesn't work)

Question

I have a Navbar on the right side of the website. But the navbar is behind the Content. I tried z-index: 1000; bit it doesn't works. I also tried to set the z-index of the content on 0. Can anybody say me what I do wrong?

DEMO:

 nav{ display: flex; justify-content: space-around; align-items: center; min-height: 8vh; background-color: rgb(29, 183, 255); font-family: 'Poppins', sans-serif; box-shadow: 0px 10px 10px rgb(156, 156, 156); z-index: 1000; }.logo{ color: rgb(236, 236, 236); text-transform: uppercase; letter-spacing: 3px; font-size: 20px; font-weight: bold; }.nav-links{ display: flex; justify-content: space-around; width: 30%; }.nav-links li{ list-style: none; }.nav-links a{ color: rgb(236, 236, 236); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }

 <nav> <div class="logo"> <h4>Logo</h4> </div> <ul class="nav-links"> <li><a href="index.html">Home</a></li> <li><a href="about.html">Über Mich</a></li> <li><a href="leistungen.html">Leistungen</a></li> <li><a href="Referenzen.html">Referenzen</a></li> <li><a href="kontakt.html">Kontakt</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav>

Answer 1

You have to use a position like position: relative;

Here's the code:

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: rgb(29, 183, 255);
    font-family: 'Poppins', sans-serif;
    box-shadow: 0px 10px 10px rgb(156, 156, 156);
    z-index: 1000;
    position: relative;
}

Answer 2

z-index does not work on the default position which is position: static , you should change it to position: relative or any other positions (absolute, fixed, or sticky)

 nav{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: rgb(29, 183, 255);
    font-family: 'Poppins', sans-serif;
    box-shadow: 0px 10px 10px rgb(156, 156, 156);
    z-index: 1000;
}

Answer 3

If your div are not on the same level z-index wont affect them try changing the parent's z-index

 .p { height: 400px; width: 100%; background-color: #ff000070; display: flex; justify-content: center; align-items: center; position: relative; }.parent { z-index: 1; }.second-parent { margin-top: -200px; z-index: 2; background-color: green; }.child { height: 90%; z-index: 1000; background-color: purple; }.second-child { z-index: 2; background-color: orange; height: 90%; }

 <div class="p parent"> Parent <div class="child"> child</div> </div> <div class="p second-parent"> Second Parent <div class="second-child"> Second Child</div> </div>

Answer 4

You should use

position : fixed;
top : 0px;

in css of nav. Like this

nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            min-height: 8vh;
            background-color: rgb(29, 183, 255);
            font-family: 'Poppins', sans-serif;
            box-shadow: 0px 10px 10px rgb(156, 156, 156);
            position: fixed;
            top: 0px;
        }

By doing this your content will hide behind navbar for solving this just add padding-top to your content. Hope it helps ☺