title: bootstrap-select overlapped with other drop-down menus
body: <p>Looking at bootstrap-select <a href="https://github.com/silviomoreto/bootstrap-select/blob/master/test.html" rel="nofollow">examples</a> no overlapping happened between different drop-down menus. However, in my examples all drop-down menus overlapping ( <a href="http://jsfiddle.net/brzu9hh4/" rel="nofollow">Demo</a>).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"&gt;
  
      &lt;title&gt;TEST&lt;/title&gt;
  
  
      &lt;link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" &gt;
      &lt;link rel="stylesheet" type="text/css"href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css"&gt;
      &lt;link rel="stylesheet" href="/static/web.css"&gt;
      &lt;link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
  
    &lt;body&gt;
  
      &lt;!-- Fixed navbar --&gt;
      &lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
        &lt;div class="container"&gt;
  
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="/search/"&gt;TEST&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse" id="navbar-collapsible"&gt;
            &lt;ul class="nav navbar-nav navbar-left"&gt;
  
              &lt;li class="active"&gt;&lt;a href="/search/"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;form class="navbar-form navbar-right" method="get" action="/snearch/" role="form"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input class="form-control" type="text" name="sid" placeholder="e.g. hello"&gt;
                      &lt;button class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-search" type="submit"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="container"&gt;
  
        &lt;form class="form-horizontal" action="/snps/" method="POST" role="form"&gt;
    &lt;div style="display:none;"&gt;&lt;input id="csrf_token" name="csrf_token" type="hidden" value="1413008961.84##d5f5a444ea1ef9d7ed3268e2e554bde2d2cc21e3"&gt;&lt;/div&gt;
      &lt;div class="input-group"&gt; 
  
        &lt;span class="input-group-addon"&gt;Test1:&lt;/span&gt;
        &lt;select class="selectpicker form-control" data-live-search="true" id="test_select" name="test_name"&gt;
              &lt;option value=""&gt;--- Select One ---&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;BR/&gt;   
      &lt;div class="input-group"&gt; 
        &lt;span class="input-group-addon"&gt;Test2:&lt;/span&gt;
        &lt;select class="selectpicker form-control" data-live-search="true" id="test2_select" name="test2_name"&gt;
            &lt;option value=""&gt;--- Select One ---&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;      
      &lt;BR/&gt;   
      &lt;div class="input-group"&gt;   
        &lt;span class="input-group-addon"&gt;Test3:&lt;/span&gt;
        &lt;select class="selectpicker form-control" data-live-search="true" id="test3_select" name="test3_name"&gt;
              &lt;option value=""&gt;--- Select One ---&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;      
      &lt;BR/&gt; 
      &lt;div class="input-group"&gt;   
        &lt;span class="input-group-addon"&gt;test4:&lt;/span&gt;
        &lt;select class="selectpicker show-menu-arrow form-control" data-live-search="true" id="test4_select" multiple data-max-options="2" name="test4_names"&gt;
              &lt;option value=""&gt;--- Select One ---&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
              &lt;option value=""&gt;Test&lt;/option&gt;
  
        &lt;/select&gt;
      &lt;/div&gt;      
      &lt;BR/&gt;      
      &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;Start position:&lt;/span&gt;
        &lt;input class="form-control" id="start_pos" name="start_pos" placeholder="e.g. 200" type="number" value=""&gt;
        &lt;span class="input-group-addon"&gt;End position:&lt;/span&gt;
        &lt;input class="form-control" id="end_pos" name="end_pos" placeholder="e.g. 1000" type="number" value=""&gt;
      &lt;/div&gt;
      &lt;BR/&gt;    
  
      &lt;div class="input-group"&gt;       
        &lt;span class="input-group-btn"&gt;
          &lt;button class="btn btn-default" type="submit"&gt;Search&lt;/button&gt;
        &lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $('.selectpicker').selectpicker();
  
    &lt;/script&gt;  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Maybe, I could use for everywhere <em>z-index</em>, but in bootstrap-select <a href="https://github.com/silviomoreto/bootstrap-select/blob/master/test.html" rel="nofollow">examples</a> they do not use it. How is it possible to avoid the use of <em>z-index</em>?</p>