Place the navigation bar at the top of other elements

Question

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

Answer 1

Maybe this works:

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

Answer 2

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

Answer 3

Make the z-index of the navigation greater than the z-index of the hover element in css.

nav { 
  z-index: 2
}

hoverElement {
  z-index: -1 
}