Navbar verschwindet unter bildern - was kann ich dagegen tun?

 - (Computer, Technik, Technologie)

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

Ü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ß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

Was möchtest Du wissen?