Also dann eins nach dem anderen:
in meinem gegenwärtigen Seitenprojekt habe ich auf einer Seite (http://kahn.8sf.de/daten.html) ein Problem mit der JS-Timeline. Der Rahmen der Timeline hat einen z-index von 5000 (laut Timeglider.css) offenbar ist dieser Wert höher als der der Dropdownmenü-items. dass führt dazu, dass wenn die Timeline in den Mittelunkt des Screens gescrollt ist deren Rahmen die Dropdownmenüs überdeckt und damit unerreichbar macht.
siehe: [Blockierte Grafik: http://kahn.8sf.de/verdeckt.jpg]
eigentlich müsste das so aussehen:
[Blockierte Grafik: http://kahn.8sf.de/normal.jpg]
Ich habe jetzt gedacht, ich müsste "einfach" dem Dropdownmenü einen z-index von irgendwas über 5000 verpassen und gut ist es. Aber da fängt meine Ratlosigkeit an:
Es reicht eigentlich diesen Wert nur für die Menüs auf dieser Seite entsprechend zu verändern, also dachte ich ich könnte den <li>-elementen einfach eine entsprechende style="" ergänzung verpassen:
<li class="dropdown s-header-v2__nav-item s-header-v2__dropdown-on-hover">
<a href="werke.html" class="dropdown-toggle s-header-v2__nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Werke <span class="g-font-size-10--xs g-margin-l-5--xs ti-angle-down"></span></a>
<ul style="z-index:5005" class="dropdown-menu s-header-v2__dropdown-menu">
<li style="z-index:5005" ><a href="werke.html#parentHorizontalTab1" class="s-header-v2__dropdown-menu-link"><font size="2">Lieder und Duette</font></a></li>
<li style="z-index:5005" ><a href="werke.html#parentHorizontalTab2" class="s-header-v2__dropdown-menu-link"><font size="2">Chorwerke</font></a></li>
<li style="z-index:5005" ><a href="werke.html#parentHorizontalTab3" class="s-header-v2__dropdown-menu-link"><font size="2">Kammermusik</font></a></li>
<li style="z-index:5005" ><a href="werke.html#parentHorizontalTab4" class="s-header-v2__dropdown-menu-link"><font size="2">Klaviermusik</font></a></li>
<li style="z-index:5005" ><a href="werke.html#parentHorizontalTab5" class="s-header-v2__dropdown-menu-link"><font size="2">Andere</font></a></li>
<li style="z-index:5005" ><a href="werke.html#parentHorizontalTab6" class="s-header-v2__dropdown-menu-link"><font size="2">Bearbeitungen</font></a></li>
</ul>Das hat aber einfach rein garnisch gebracht. (ergo da genau tappe ich also mal wieder im Dunkeln)
Meine Frage(n) also:
- wo genau kann bzw. muss ich den z-index meines Dropdown menüs ändern, dass es auch oben bleibt selbst wenn es dann über der Timeline liegen würde?
- gibt es möglicherweise auch eine andere Möglichkeit dafür zu sorgen, dass das Menü immer oben bleibt?