List items displaying over menu on website-CodePudding

I can't figure out why the list items on my website are displaying on top of my logo and the menu. Have a look yourself on the website or this image: a screenshot of the https://papojari.codeberg.page/art/ website Some time ago I had the same issue with headings. The headings were in the post-title class because of a template I use. When I removed that class, the problem was gone. My list items don't have a class like that though and I can't find any references to that class and what it does. You can obviously have a look at the CSS on the website but additionally the source code is also here: https://codeberg.org/papojari/pages.

Please tell me how to stop the list items from displaying on top of my logo and the menu.

CodePudding user response：

@papojari, I have checked your site and I think that it's the problem of the z-index between and header and main section.

Here is the adding style for fixing it.

header {
    position: relative;
    z-index: 99;
}

main {
    position: relative;
    z-index: 0;
}

I hope it is helpful for you.

CodePudding user response：

Use this code to fix directly

header {
  position: relative;
  z-index: 99;
}

Reason

You need z-index to control the vertical stacking order of elements. And z-index only affects elements that have a position value other than static (the default).

Take a look of this https://css-tricks.com/almanac/properties/z/z-index/