Question

我正在使用bootstrap下拉菜单和https://github.com/wilddeer/stickyfill来修复屏幕顶部的一些元素。请参阅jsfiddle。

我无法实现，下拉菜单覆盖“粘性线”。我已经尝试过z-index wothout成功。

我尝试使用其他粘性插件（makefixed.js，jquery.sticky.js）而不是粘贴填充，但结果是一样的。菜单总是在粘性元素后面。

有什么想法吗？

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

中添加header即可

header.sticky {
    z-index: 100;
}

工作jsfiddle link

Answer 3

应用z-index

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

Answer 4

将标题类粘贴更改为另一个影响子html元素

的标题

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

4 个答案: