title: Bootstrap dropdown is always behind a sticky element
body: <p>I'am using bootstrap dropdown menu and <a href="https://github.com/wilddeer/stickyfill" rel="nofollow noreferrer">https://github.com/wilddeer/stickyfill</a> to fix some elements on the top of the screen. See <a href="https://jsfiddle.net/nagyt234/tuf9pwhf/18/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p>I could not achieve, that the dropdown menu appers over the "sticky line". I've tried with z-index wothout success.</p>
  
  <p>Instead of stickyfill I've tried with other sticky plugins (<a href="https://github.com/guimadaleno/makefixed.js/tree/master" rel="nofollow noreferrer">makefixed.js</a>, <a href="https://github.com/garand/sticky" rel="nofollow noreferrer">jquery.sticky.js</a>) but the result is the same. The menu is always behind the sticky element.</p>
  
  <p>Any idea?</p>
  
  <p>The HTML code (the same as on jsfiddle):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $(".sticky").Stickyfill();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.diet-health.info/js/stickyfill.js"&gt;&lt;/script&gt;
  
  &lt;header class="sticky" style="padding:3px;top:0px"&gt;
    &lt;div class="dropdown btn-group" style="float:right;"&gt;
      &lt;button id="right-menu" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;Right Menu&lt;/button&gt;
      &lt;ul class="dropdown-menu pull-right" aria-labelledby="right-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;div class="sticky" style="top:40px"&gt;
    &lt;p&gt;
  ********************************************* A sticky line *********************************************
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;
  &lt;p&gt;Normal line&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>