Question

我正在实施一长篇文章，其中的文章具有自己的粘性标题，并且每个标题都有一个下拉菜单。

有些文章的内容很少，因此它们的高度将小于其自己的下拉菜单。然后我发现下拉菜单位于下一篇文章标题的后面。

我认为这是z-index的问题。但是Bootstrap已将z-index的下拉菜单设置为1000，这意味着它应该位于下一个标头的前面，其中z-index小于1000或未定义（尽管不在标头的前面）。下一个下拉菜单）。但实际上它出现在后面。

This link通过将下拉菜单按钮的容器设置为比下一个粘性元素更大的z-index似乎可以解决。但就我而言，这意味着我将为每个相似的元素设置不同的z-index。由于一页中可能有超过1,000篇文章，所以我认为这不是解决问题的好方法。

简而言之，这是我的两种问题：

从理论上讲，为什么不能保证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>

粘性容器中的Bootstrap下拉菜单位于其他下拉菜单的按钮后面

0 个答案: