CSS position absolute overlay navbar position fixed-CodePudding

I have created hover effect of two images. image1 changes to image2 on hover in div"img3". Both images are in div"img3" and image2 position is absolute. Now my Navbar or header (section "header") position is fixed. So whenever I hover on image1 image2 comes on top of the Navbar as shown in the image2 below. Image1 Image2

CodePudding user response：

Add this to your navbar

z-index: 100;

because of this whatever u add will not poke over navbar.

CodePudding user response：

The answer of DarkForest is correct. Just to explain a bit further - the attribute of z-index which defines layering of site elements is applicable to both position:fixed and position:absolute. The default behavior of layering is hierarchical, which means, that the element which is further in the code will initialy overlay the first element. That is unless you define attribute z-index to one or both of these elements. the higher the number, the more upper layer of display.

Usually, you want to assign as high z-index as you can to the fixed navbar as you don't really want anything to display over it (unless it's an element inside of it)

To summarize:

.navbar {
   /*dimensions and other styles*/
   position:fixed;
   z-index: 100;
}

should do the trick