Bootstrap下拉菜单始终位于粘性元素后面 [英] Bootstrap dropdown is always behind a sticky element

问题描述

我正在使用引导程序下拉菜单和 https://github.com/wilddeer/stickyfill 修复屏幕顶部的某些元素。参见 jsfiddle 。

I'am using bootstrap dropdown menu and https://github.com/wilddeer/stickyfill to fix some elements on the top of the screen. See jsfiddle.

I无法实现，下拉菜单位于粘滞线上方。我已经尝试了z-index成功的解决方案。

I could not achieve, that the dropdown menu appers over the "sticky line". I've tried with z-index wothout success.

我尝试使用其他粘性插件（ makefixed.js ， jquery.sticky.js ），但结果相同。菜单始终位于粘滞元素的后面。

Instead of stickyfill I've tried with other sticky plugins (makefixed.js, jquery.sticky.js) but the result is the same. The menu is always behind the sticky element.

有什么想法吗？

HTML代码（与jsfiddle）：

The HTML code (the same as on 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>

推荐答案

只需添加<$ c $在标头

header.sticky {
    z-index: 100;
}

正在工作jsfiddle 链接

working jsfiddle link

这篇关于Bootstrap下拉菜单始终位于粘性元素后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！