Navbar verschwindet unter bildern - was kann ich dagegen tun?

Ich habe eine sticky navbar gemacht, die also immer oben angezeigt wird. Wenn man nun scrollt verschwindet die navbar aber unter die texte, bilder etc.

Wie kann man das beheben?

Habe es schon mit "z-index" versucht, das wird allerdings ignoriert.
Danke für Rückmeldungen!

Answer 1

[glebkema]

Überprüfen Sie die Faktoren, die die Wirkung der z-index Eigenschaft beeinflussen:

1) Der Z-index betrifft nur HTML-Blöcke, deren die position Eigenschaft auf "absolute", "relativ" oder "fixed" festgelegt ist.

2) Wenn zwei Blöcke denselben Z-Index haben, wird derjenige, der später in HTML beschrieben wird, oben platziert.

3) Der Z-Index vergleicht Blöcke, die sich in der Struktur eines HTML-Layouts auf derselben Ebene befinden. Wenn daher ein Block in einem anderen Block liegt, kann der Z-Index des übergeordneten Blocks wichtiger sein.

4) Der Initialwert für "z-index" ist "auto". Wenn der Block jedoch auf "opacity" von weniger als 1 eingestellt ist, zeichnet der Browser ihn als eigenständigen Block mit "z-index: 0". (Erläuterung auf StackOverflow)

Wenn wir uns zum Beispiel dieses Layout ansehen:

<header style="position: fixed; top: 0; left: 0; right: 0;">
	<nav>Menü</nav>
</header>
<main>
	<img src="image.jpg" alt="Bild">
</main>

dann wird das Bild dem Menü überlagert:

• wenn das <main>-Tag die Eigenschaft "position: relativ;" erhält;
• oder wenn das <img>-Tag die Eigenschaft "opacity: 0,9;" erhält.

Um dies später zu beheben, ist es sinnlos, einen z-index für das <nav>-Tag hinzuzufügen. Fügen Sie stattdessen einen z-index mit einem positiven Wert für das <header>-Tag hinzu.

Woher ich das weiß: Berufserfahrung – Ich erstelle Wordpress-Themes, Plugins und Online-calculator