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

Question

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> 

Answer 1

use !important in z-index. I think it can be helpful for you

Answer 2

z-index property allows you to make absolute or fixed elements cover html elements of your page, higher the number, higher the position it covers on your website if you set other elements with this property.

If you use too many different z-index or if you abuse it, you can have a difficult time understanding what element is actually covering something.

The best way should be to use it very rarely and with fixed values numbers like 0, 10, 100, 1000 to give a more clearer hierarchy, in your case the header has a lower z-index than your main html page, this happened because normally main content shouldn't have z-index. you can easily fix that with setting an higher number to your header like this

z-index: 10 !important;

Another little tip i can give you is too use less in line style which makes the code more difficult to read, also try using less !Important statements, it forces the cascade inheritance style and should be used in very very few situations, using it too much nullifies the very concept of css.

Answer 3

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>