Bootstrap 下拉列表总是在粘性元素后面

Question

我正在使用 bootstrap 下拉菜单和 https://github.com/wilddeer/stickyfill to fix some elements on the top of the screen. See jsfiddle。

我无法实现下拉菜单出现在 "sticky line" 之上。我试过 z-index 没有成功。

我尝试使用其他粘性插件 (makefixed.js, jquery.sticky.js) 而不是 stickyfill，但结果是一样的。菜单总是在粘性元素后面。

有什么想法吗？

HTML代码（与jsfiddle上的相同）：

$(function() {
  $(".sticky").Stickyfill();
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://www.diet-health.info/js/stickyfill.js"></script>

<header class="sticky" style="padding:3px;top:0px">
  <div class="dropdown btn-group" style="float:right;">
    <button id="right-menu" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Right Menu</button>
    <ul class="dropdown-menu pull-right" aria-labelledby="right-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>
</header>
<div class="clearfix"></div>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<div class="sticky" style="top:40px">
  <p>
********************************************* A sticky line *********************************************
  </p>
</div>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>
<p>Normal line</p>

Answer 1

试试这个

查看演示here

HTML:

<div class="sticky" style="top:40px; z-index: -1;">
  <p>
********************************************* A sticky line *********************************************
  </p>
</div>

Answer 2

应用 z-index

.sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: -1;
}

Answer 3

只需在header

中添加z-index

header.sticky {
    z-index: 100;
}

工作 jsfiddle link

Answer 4

将 header sticky 的 class 更改为另一个影响 child html 元素

Bootstrap 下拉列表总是在粘性元素后面

Bootstrap dropdown is always behind a sticky element

css

sticky

twitter-bootstrap

drop-down-menu