bootstrap typeahead dropdownbox z-index无法正常工作

Question

我使用typeahead创建了自动完成搜索。现在问题是下拉列表落后于其他元素。

我的HTML代码是：

<div class="row search_nav">
  <form autocomplete="off" class="navbar-form active" role="search" style="background: #F8F8F8;">
    <div class="input-group">
      <input type="text" class="typeahead form-control" id="id_q" placeholder="Search..." autocomplete="off" name="q">
      <span class="input-group-btn">
        <button type="submit" class="btn btn-default" >
          <span class="glyphicon glyphicon-search">
            <span class="sr-only">Search...</span>
          </span>
        </button>
      </span>
    </div>
  </form>

    <script type="text/javascript" src="{% static 'public/js/handlebars.js' %}"></script>
    <script type='text/javascript' src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>
    <script type='text/javascript' src="{% static 'public/js/typeahead.bundle.js' %}"></script>  
    <script type="text/javascript" src="{% static 'public/js/search.js' %}"></script>
  <style type="text/css">
    #id_q:active {
        box-shadow: 0 0 30px #96f226
    }
    #id_q:focus {
        box-shadow: 0 0 30px #96f226
    }

    .twitter-typeahead .tt-query,
    .twitter-typeahead .tt-hint {
        margin-bottom: 0;
    }
    .tt-hint {
        display: block;
        width: 100%;
        height: 38px;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.428571429;
        color: #999;
        vertical-align: middle;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
              box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
              transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }
    .tt-dropdown-menu {
        z-index: 2000 !important;
        min-width: 200px;
        margin-top: 2px;
        padding: 5px 10px;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .2);
        *border-right-width: 2px;
        *border-bottom-width: 2px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
    }
    .tt-suggestion {
        display: block;
        padding: 3px 20px;
    }
    .tt-suggestion.tt-cursor {
      color: #fff !important;
      background-color: #0097cf;

    }
    .tt-suggestion.tt-cursor .tt-hint{
        color: #fff;
    }
    .tt-suggestion.tt-is-under-cursor {
        color: #fff;
        background-color: #428bca;
    }
    .tt-suggestion.tt-is-under-cursor a {
        color: #fff;
    }
    .tt-suggestion p {
        margin: 0;
    }
  </style>

typeahead javascript是：

// Spider search
var spider = new Bloodhound({
datumTokenizer: function (datum) {
    return Bloodhound.tokenizers.whitespace(datum.name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
remote: {
    url: 'http://' + location.host + '/search/autocomplete/spider',
    replace: function(url, query) {
        return url + "?q=" + query;
    },
    filter: function(results) {
        return $.map(results, function(result) {
            console.log(result)
            return {
                    name: result.name,
                    url: result.url,

            }
        });
    }
}
});
spider.initialize();

// Customer search

var customer = new Bloodhound({
datumTokenizer: function (datum) {
    return Bloodhound.tokenizers.whitespace(datum.name);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
remote: {
    url: 'http://' + location.host + '/search/autocomplete/customer',
    replace: function(url, query) {
        return url + "?q=" + query;
    },
    filter: function(results) {
        return $.map(results, function(result) {
            console.log(result)
            return {
                    name: result.name,
                    url: result.url,

            }
        });
    }
}
});
customer.initialize();

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1,

},
{
    name: 'Spiders',
    displayKey: 'name',
            templates: {header: '<h5>Spiders</h5>',

                suggestion: Handlebars.compile('<p class="suggested-name"><a href="{{ url }} ">  {{ name }}</a></p>')
            },
    source: spider.ttAdapter()

        },
{
    name: 'Customer',
    displayKey: 'name',
            templates: {header: '<h5>Customers</h5>',

                suggestion: Handlebars.compile('<p class="suggested-name"><a href="{{ url }} ">  {{ name }}</a></p>')
            },
    source: customer.ttAdapter()
        });

我尝试使用z-index但它不起作用。除了z-index之外还有吗？请帮帮我......