Clickable image overlay taking over navigation bar (I want the inverse)-CodePudding

how are you ? I have a question about priority on elements.

On my artist's portfolio, I have a "photography" page that is composed of the navigation that is present on every pages of the website, and a table that contains clickable images presenting differents type of photography style.

When I scroll down on my page, my navigation bar follows and keep on top of my page, so I haven't have to scroll to the top to change of page, plus, its opacity becomes more transparent to let my images being visible, still, I cannot click on my image through the navigation bar (and I don't want it). The problem is that when I scroll down enough to have part of an image behind my navigation bar, when I put my mouse over an image, the clickable image take completely over the navigation bar, and I can only access the navigation bar if I put my mouse away of the image first.

So I think there might be a concept of priorty between the differents elements of html/css, and I would like to know how can I give priority on my navigation bar over the table of images ?

I have tried to search for websites which talk about priority in css, but I think the priority I have in mind isn't the same as the web. I will post my code also, I don't know if I have to post all my css code, if someone wants to help resolve my problem and need more of my code, I will provide it.

THIS IS MY HTML CODE :

<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Clea Jan Kerguistel</title>
    <link href="style.css" rel="stylesheet">
    <style type="type/css"></style>
    <meta charset="utf-8">

</head>

<body>
    <div id="menu">
        <ol>
            <li>
                <a href="home.html">
                    <h3>CLEA JAN KERGUISTEL</h3>
                </a>
            </li>

            <li style="float:right">
                <a href="contact.html">
                    <h4>CONTACT</h4>
                </a>
            </li>

            <li style="float:right">
                <a href="plastic.html">
                    <h4>PLASTIC</h4>
                </a>
            </li>

            <li style="float:right">
                <a href="video.html">
                    <h4>VIDEO</h4>
                </a>
            </li>

            <li style="float:right">
                <a href="photography.html">
                    <h4>PHOTOGRAPHY</h4>
                </a>
            </li>

        </ol>
    </div>
    <div id="spacer"></div>

    <div id="prio">
        <table>
            <tr>
                <div>
                    <td>
                        <a href="argentique.html">
                            <img id="photo" src="image/maune.JPG">
                        </a>
                    </td>
                </div>
                <div>
                    <td>
                        <a href="paysage.html">
                            <img id="photo" src="image/paysage.JPG">
                        </a>
                    </td>
                </div>
            </tr>

            <tr>
                <div>
                    <td>
                        <a href="recherche.html">
                            <img id="photo" src="fichiers cléa/chaise/L1006659.jpg">
                        </a>
                    </td>
                </div>
                <div>
                    <td>
                        <a href="livre.html">
                            <img id="photo" src="image/anaele.jpg">
                        </a>
                    </td>
                </div>
            </tr>

            <tr>
                <div>
                    <td>
                        <a href="autre.html">
                            <img id="photo" src="fichiers cléa/NIKON/NB.07-2020/1905-06a.JPG">
                        </a>
                    </td>
                </div>
                <div>
                    <td>
                        <a href="studio.html">
                            <img id="photo" src="image/6415-06a.JPG">
                        </a>
                    </td>
                </div>
            </tr>
        </table>
    </div>
</body>

</html>

AND THIS IS THE NAVIGATION BAR CSS CODE RELATED

ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    opacity: 0.8;


}



li {
    float: left;
    font-family: Montserrat;
    margin-right: 10px;



}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: darkgrey;
    border-radius: 50px;
}

.active {
    background-color: wheat;
}

a {
    color: black;
    background-color: white;
}

AND (finally) THIS IS THE PHOTO TABLE CODE :

table {
    margin-left: auto;
    margin-right: auto;

}

#photo {
    height: 408px;
    width: 606px;
}

#photo:hover {
    opacity: 0.7;

}

Perhaps I can also upload photo of the page to give you a better idea of what I expect : When I am on the nav bar When I am on the image

Thank all for your future responses =) !!!

(My post may be long, I have never posted on forums, so if you have tips to give me for the next time I will post, I would like to know it)

CodePudding user response：

Just add a z-index property to your fixed navbar and it will be fine.

ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    opacity: 0.8;
    
    z-index: 1;

}