Раскрывающееся меню начальной загрузки в прикрепленном контейнере находится за кнопками других выпадающих меню. - PullRequest
0 голосов
/ 06 февраля 2019

Я реализую длинный список статей, в которых статьи имеют свои собственные липкие заголовки, и для каждого такого заголовка есть раскрывающееся меню.

Есть некоторые статьи с очень небольшим содержанием, и поэтому ихвысоты будут меньше, чем их собственные выпадающие меню.Затем я обнаружил, что выпадающее меню находится за заголовком следующей статьи.

Я думаю, что это проблема 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...