Transparency problem using position Fixed in css

Question

I’m trying to create a menu that doesn’t move independently of the user scrolling on the page using position fixed.

However I am having a problem with transparency, whenever the menu meets with other content, it becomes transparent.

Before I used a menu with position absolute, and the menu didn’t even look transparent. I googled tried some things but I couldn’t solve, I put opacity: 100% but also did not solve.

Follow the css code from my menu, and images demonstrating what happens. Does anyone know how to solve this problem?

div#menu
{
    width: 100%;
    background-color: rgba(60,60,65,1);
    box-shadow: 0px 0px 10px rgba(0,0,0,.5);
    position: fixed;
    top: 0px;
    left: 0px;
}
div#menu ul
{
    text-align: left;
}
div#menu li
{
    display: inline-block;
    padding: 0px 0px 0px 0px;
    margin: 0px 25px 0px 25px;
}
div#menu a
{
    font-family: Arial, sans-serif;
    font-size: 16pt;
    text-decoration: none;
    color: white;
}
div#menu a:hover
{
    color: rgba(50,50,255,1);
    text-decoration: underline;
}

Answer 1

You only need to set the z-index in this case (the lower the higher) link w3schools