Я реализую длинный список статей, в которых статьи имеют свои собственные липкие заголовки, и для каждого такого заголовка есть раскрывающееся меню.
Есть некоторые статьи с очень небольшим содержанием, и поэтому ихвысоты будут меньше, чем их собственные выпадающие меню.Затем я обнаружил, что выпадающее меню находится за заголовком следующей статьи.
Я думаю, что это проблема z-index
.Но Bootstrap уже установил z-index
раскрывающихся меню на 1000
, что означает, что он должен быть перед следующим заголовком с z-index
меньше 1000 или неопределенным (хотя и не перед следующим выпадающим меню).Но на самом деле он появляется позади.
Эта ссылка , кажется, имеет решение, установив контейнер кнопки выпадающего меню с большим значением z-index
, чем у следующего закрепленного элемента.Но в моем случае это означает, что я буду устанавливать каждый подобный элемент с разными z-index
.Поскольку у меня может быть более 1000 статей на одной странице, я не думаю, что это хороший способ обойти эту проблему.
Короче говоря, вот мои вопросы в двух направлениях:
- Теоретически, почему не гарантируется, что элемент с большим z-индексом будет перед элементом с меньшим z-индексом?Чем элементы
sticky
отличаются от других позиций? - Каким образом следует реализовывать выпадающие меню в закрепленном заголовке статей в длинном списке?
Некоторые демонстрации :(каждый <header />
имеет свой стиль, но одинаковый контент)
.container {
height: 200vh;
}
section > header:not(.non-sticky) {
position: sticky;
top: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<section>
<header>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</header>
<div>The above dropdown menu in a sticky element is behind the below buttons.</div>
</section>
<section>
<header class="non-sticky">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</header>
<div>However, it's OK if the button is no child of any sticky elements.</div>
</section>
<section>
<header style="z-index: 2">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</header>
<div>It's also OK if the sticky container has z-index greater than the next container.</div>
</section>
<section>
<header style="z-index: 1">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</header>
<div>But it's dirty to set the z-index of similar elements differently, especially in a decreasing way.</div>
</section>
<section>
<header style="z-index: 1;">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</header>
<div>Anyway, the main problem is: why an element with greater z-index is not guaranteed to be in front of those with smaller z-index?</div>
</section>
</div>