CodePudding user response：

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.

CodePudding user response：

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