CSS grid / z-index Problem

html.de-Forum HTML, XHTML & CSS
1

Hallo, bin noch absoluter Anfänger in HTML und CSS und stoße gerade über ein Problem, was mir Rätsel aufwirft. Die Seite wurde mit CSS grid erstellt.

Die untere Navigation enthält ein Untermenü, was aber durch den goldbraunen Bereich darunter verdeckt wird. Ich habe allen grid items einen z-index von 0 zugeordnet und meinem Untermenü einen besonders hohen Wert, damit es in den Vordergrund rückt, funktioniert nur nicht. Um zu überprüfen, ob überhaupt korrekterweise ein Unterpunkt erstellt wurde, habe ich alle Hintergründe der darunter liegenden grid items entfernt. Der Untermenüpunkt „News11“ ist jetzt zu sehen. Weshalb funktioniert hier z-index nicht? Würde mich freuen, wenn mir jemand helfen kann.

Hier der Code: https://jsfiddle.net/ocx9zf6m/
Hier mit entfernten Hintergründen: https://jsfiddle.net/gyhxgpfc/

2

Also als erstes fällt auf, dass du gar kein Untermenü hast.
Du hast das hier:

[HTML]

  • News
  • Expertise
  • Information
  • Contact
[/HTML] Wo ist denn hier das Untermenü?

Ich glaube du meinst sowas hier:

[HTML]

  • News
    • Unterpunkt
  • Expertise
  • Information
  • Contact
[/HTML]

„Unterpunkt“ ist jetzt ein Unterpunkt von „News“. So würde es richtig gehen.

Wenn du das nicht willst, sonder den Punkt einfach nur in den Vordergrund, würdest du das mit z-index machen (was du ja bereits versucht hast). Was du allerdings nicht gemacht hast, ist dein Menü auf position: absolute, bzw. relative gesetzt, denn nur dann funktioniert z-index auch. In deinem Falle wäre im übrigen relative angebracht.

3

Genau, möchte einfach nur den Punkt in den Vordergrund bekommen. Meinte es eher zum Verständnis mit „Unterpunkt“. Habe es eben mit relative versucht, aber es funktioniert trotzdem nicht mit z-index. Könntest du es auf der Seite einmal so abändern, dass der Unterpunkt in den Vordergrund rückt? Denke, ich stehe gerade auf dem Schlauch :confused: Danke!

Edit: Habe die .navigation auf einen hohen z-index gestellt und jetzt funktioniert es komischerweise, auch ohne absolute und relative

4

adde einfach
nav {
position: relative;
z-index: 10000;
}

Edit:
Kurze Erklärung - wenn du z.B. ein

  • Element auf relative und z-index 100 setzt, ist dann ist das
  • -Element NUR innerhalb des auf z-index: 100; es orientiert sich also am Mutterelement. Dementsprechend muss man das nav komplett auf z-index: 100 setzen.