javascript - 如何在 html 页面的其他内容上显示一个 div？

Question

我是 html 和 css 的新手，我创建了一个包含城市名称的 div。我试图在单击按钮时显示该 div。但是当我单击按钮时，该 div 隐藏在我页面的下一部分后面。这是它看起来像的图像:

但我想将该 div 显示在该 div 下方的部分而不是后面。要了解我想要如何显示的更多信息，请参阅 askme.com然后点击“印度其他地区”下拉按钮。这是我的 html 代码:

<!--start SearchBox section-->
        <section id="searchbox"style="background:white">
            <div class="container" style="margin-top:0px;">


              <div class="row">

                    <div class="col-lg-12">


               <form style="">
                    <center>
                            <div id="SearchBoxBorder" style="background:white;border-style:soli;border-radius:5px;margin-top:20px;width:800px;">
                            <table id="mytable" >
                                    <td style="width:300px;background:white;">
                                       <center> <div class="form-group">
                                                <input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
                                                    style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
                                                    border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
                                        </div></center>
                                     </td>

                                     <td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center>    </td>

                                     <td style="width:400px;background:white;">
                                     <center>
                                             <div class="input-group" style="position: relative;">
                                                   <input type="text" class="form-control" placeholder="in locality"
                                                    style="border-width:5px;background:white; margin-top:2px; margin-left:10px; margin-right:20px;width:;font-size:18px;
                                                    border-style:solid;border-width:5px;border-color:#eee;font-family:Arial,Helvetica,sans-serif;height:42px;">
                                                   <div class="input-group-btn" >
                                                            <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown" id="dropdownBtn" 
                                                             style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
                                                             border-color:#eee;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;margin-top:2px;">Select<span class="caret"></span></button>

                                                             <!--City dropdown -->
                                                                    <div class="SearchCities" id="dialog" title="Basic dialog" >

                                                                            <div id="outer" style="">



                                                                                        <div id="innerLeft" style="">
                                                                                            <h5 >North India:</h5>
                                                                                            <ul class="city" type="none";>
                                                                                                    <li><a>Delhi</a></li>
                                                                                                    <li><a>Agra</a></li>
                                                                                                    <li><a>Shrinagar</a></li>
                                                                                                    <li><a>Noida</a></li>
                                                                                                    <li><a>Himachal</a></li>
                                                                                                    <li><a>Patna</a></li>
                                                                                            </ul>

                                                                                        </div>

                                                                                        <div id="innerRight" style="">
                                                                                            <a class="close">&times;</a>
                                                                                            <h5>West India:</h5>
                                                                                            <ul class="city" type="none";>
                                                                                                    <li><a>Mumbai</a></li>
                                                                                                    <li><a>Pune</a></li>
                                                                                                    <li><a>Nashik</a></li>
                                                                                                    <li><a>Kolhapur</a></li>
                                                                                                    <li><a>Osmanabad</a></li>
                                                                                                    <li><a>Ahamdabad</a></li>
                                                                                            </ul>
                                                                                        </div>


                                                                            </div><!--/outer-->
                                                                        </div><!--/SearchCities-->


                                                             </div><!-- /btn-group -->
                                                   <button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i>  Search</button>
                                             </div><!-- /input-group -->
                                           </center>         
                                     </td>

                            </table>
                        </center>
                    </form>

    </div><!--/col-lg-12-->
</div><!--/row-->
    </div><!--/end of container-->
</section>
<!--End of SearchBox section-->

下面是我用于显示该 div 的 CSS:

.SearchCities {
  float: right;
  position:absolute;
  margin-top:3px;
  top: 100%;
  right:20px;

}

所以请帮助我，并提出任何解决方案以实现上述目标。 .提前谢谢你。

我添加了 .searchCiries{z-index:1;}，这是我的输出:

我不希望城市名称出现在容器 div 中。所以请提出任何更正建议

Answer 1

在 css 中添加一个 z-index 值，例如:z-index:100