jquery - div在表单中显示在其他内容后面

Question

我有一个自动填充字段，当您输入您所在的地区或县时，它会自动填充数据库中的数据。然而，当您开始输入建议显示在主要内容 div 后面的框时，所有这一切都完美无缺。

您可以通过转到 http://dev.exclusivecard.co.uk

如果您在页面顶部的搜索按钮左侧的字段中输入“Merseyside”，您将看到一个框出现，但它出现在主要内容的后面。我正在使用的代码可以在这里找到 http://phppot.com/demo/jquery-ajax-autocomplete-country-example/

我的 CSS 看起来如下...

 #list-box{ position:absolute;}
 #country-list{position:relative; float:left;list-style:none;margin:0;padding:0;width:190px; color:#262626;}
 #country-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
  #country-list li:hover{background:#F0F0F0;}
  #demo-content table.tutorial-table {table-layout:auto;}

和页面

<div id="demo-content">
    <div class="frmSearch">
        <input class="form-control" name="search-box" id="search-box"  type="text" placeholder="<?php if(isset($_COOKIE['localArea'])){ echo $_COOKIE['localArea'];}?>" />
        <div id="list-box"></div>
    </div>
</div>

Answer 1

对每个元素播放 CSS z-index 属性顺序，使其按您需要的顺序出现。