Search code examples
csspositionhierarchybringtofront

z index not working on the navigation bar (it shows the content below)

https://civitonia.com/26744293

So basically I'm building this website and for the navigation bar I've added a rectangle with a gradient and just above this rectangle the menu itself. The only way to make the menu visible (Home, Artist*, etc..) is to set the z-index of the rectangle/gradient like this

z-index:0!important;

if not the gradient will completely cover the content of the menu.

The main problem is the when I set the rectangle as just shown above, it will show all the content below it (text, images, etc..)

I've tried to add z-index to every element to make it work but is seems useless. Does anyone know what to do? My mission is to make the menu voices (Home, Artist*) above everything, then the rectangle gradient, and then everything else NAV>GRADIENT>EVERYTHING ELSE

This is the code for my rectangle/gradient :

<div id="grad1" style="z-index:1!important; position:fixed; width:1920px;height:50px;border:1px solid #000;"></div>

<style>
#grad1 { height: 40px!important; background-color: black; background-image: linear-gradient(0deg, transparent, #d9ff76 40%); } 
.dark-mode #grad1 { background-color: red; background-image: linear-gradient(0deg, #d9ff76 , black 40%); }
</style> 
Solution

  • I looked at you website and changing the z-index in the inline style of the div to 3 solved the problem.

    <div id="grad1" style="z-index:3!important; position:fixed; width:1920px;height:50px;border:1px solid #000;"></div>

    Website