why does my image mix with my navigation bar-CodePudding

When i scroll on the website the image and nav bar mix together. The image goes through the navigation bar and it looks like the background of the navigation bar is the image.

i put the position of the nav bar fixed and the z-index 1 and the div of the image position relative and z-index 0

    <div >
       <a href="#home" ><span >BR</span><span > Architects</span></a>
        <div >
            <a href="#projects" >Projects</a>
            <a href="about" >About</a>
            <a href="contact" >Contact</a>
        </div>
    </div>

    <div id="home">
        <div >
            <img src="skyscraper.jpg" alt="">
        </div>
    </div>
  </html>

.header-top{
    box-shadow: 0px 5px 8px -2px rgba(0,0,0,0.75);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 6px 0px;
    z-index: 1;
}
.meny{
    float: right;
    word-spacing: 26px;
    padding: 0px 25px 0px 0px;
}
.meny-link{
    color: black;
    text-decoration: none;
    letter-spacing: 3px;
}
.br{
    padding: 0px 0px 0px 10px;
    font-weight: bold;
}
#home{
    position: relative;
    top: 23px;
    z-index: 0;
}
.image img{
    width: 100%;
    height: 675px;
}

CodePudding user response：

You can simply add background: white; to .header-top if you don't want it being transparent.

Here's an example:

.header-top{
    box-shadow: 0px 5px 8px -2px rgba(0,0,0,0.75);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 6px 0px;
    z-index: 1;
    background: white;
}
.meny{
    float: right;
    word-spacing: 26px;
    padding: 0px 25px 0px 0px;
}
.meny-link{
    color: black;
    text-decoration: none;
    letter-spacing: 3px;
}
.br{
    padding: 0px 0px 0px 10px;
    font-weight: bold;
}
#home{
    position: relative;
    top: 23px;
    z-index: 0;
}
.image img{
    width: 100%;
    height: 675px;
}

    <div >
       <a href="#home" ><span >BR</span><span > Architects</span></a>
        <div >
            <a href="#projects" >Projects</a>
            <a href="about" >About</a>
            <a href="contact" >Contact</a>
        </div>
    </div>

    <div id="home">
        <div >
            <img src="https://www.tommasocimarelli.com/wp-content/uploads/2020/01/skyscraper-manhattan.jpg" alt="">
        </div>
    </div>

CodePudding user response：

Try to write a big number into property z-index to navbar like 99