Bootstrap dropdown is always behind a sticky element

问题

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 could not achieve, that the dropdown menu appers over the "sticky line". I've tried with z-index wothout success.

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.

Any idea?

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>

回答1:

Just add z-index in header

header.sticky {
    z-index: 100;
}

working jsfiddle link

回答2:

Try this

Check demo here

HTML:

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

回答3:

Apply z-index

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

回答4:

change the class of header sticky to another it's affecting the child html element

来源：https://stackoverflow.com/questions/44022269/bootstrap-dropdown-is-always-behind-a-sticky-element

标签

css

twitter-bootstrap

drop-down-menu

sticky