[CSS][HTML] element z wyższym z-index nie przykrywa swojego rodzeństwa z niższym z-index Opcje

[stellatus]

Przykład: https://www.freuciv.com/2019/12/13/beweis-f...-reinkarnation/
Screenshot: http://srv19859.microhost.com.pl/2020-05-12_12h34_51.jpg

Dropdown wchodzi pod przycisk. Nie mam pojęcia, jak sobie z tym poradzić. Struktura drzewa jest następująca:

Kod

<div class="taxonomy-dropdown">
    <button class="dropbtn"></button>
    <div class="taxonomy-dropdown-content"></div>
</div>

- .taxonomy-dropdown ma z-index: 3
- .dropbtn ma z-index: 1
- .taxonomy-dropdown-content ma z-index: 3

Tak więc .taxonomy-dropdown-content powinien pokrywać .dropbtn, bo ma wyższy z-index. Tak się nie dzieje. Gdzie jest przyczyna problemu?

Ten post edytował stellatus 14.05.2020, 10:28:05

[trueblue]

Wyrzuć z-index z .taxonomy-dropdown (jest dwukrotnie).

Każdy .g1-collection-item tworzy nowy stos dla z-index, to nie jest tak, że dowolny element na stronie będzie przykrywać inny jeśli ma większy z-index.
Czytaj więcej o CSS.
https://css-tricks.com/almanac/properties/z/z-index/

[stellatus]

Dzięki. Przeczytałem też to: https://www.freecodecamp.org/news/4-reasons...r-6bc05f103e6c/

Rozwiązane. Zmieniłem HTML:

Kod

<button class="dropbtn taxonomy-dropdown"></button>
<div class="taxonomy-dropdown-content"></div>

Ten post edytował stellatus 14.05.2020, 11:28:28