Place the navigation bar at the top of other elements-CodePudding

I am working on a website and at this problem I got stuck I have created a navigation bar and applied fixed position property in css, but below it, I have created an hover element but this hover display above the navigation bar. Here are some screenshots:)

Here it is not creating any problem(before scrolling down)

after scrolling down it is displaying on the navigation bar

CodePudding user response：

Set the z-index of the navigation bar large enough to always be larger than the hovering element, even when it's hovering.

CodePudding user response：

Maybe this works:

nav {
    position: sticky;
    top: 0;
    z-index: 40;
}