title: How to display a div over other containts of an html page?
body: <p>I am new to html and css,I have created a div that contains citynames.
  I am trying to display that div on a button click.But when i click on button then that div gets hidden behind the next section of my page.
  here is the image it looks like:
  <img src="https://i.stack.imgur.com/qsVdX.png" alt="enter image description here"></p>
  
  <p>but i want to display that div over the section bellow that div and not behind. For getting more idea how i want ot display see <a href="http://www.askme.com/rest-of-india" rel="nofollow noreferrer">askme.com</a> and click on 'rest of india' dropdown button.
  here is my html code:</p>
  
  <pre><code>&lt;!--start SearchBox section--&gt;
          &lt;section id="searchbox"style="background:white"&gt;
              &lt;div class="container" style="margin-top:0px;"&gt;
  
  
                &lt;div class="row"&gt;
  
                      &lt;div class="col-lg-12"&gt;
  
  
                 &lt;form style=""&gt;
                      &lt;center&gt;
                              &lt;div id="SearchBoxBorder" style="background:white;border-style:soli;border-radius:5px;margin-top:20px;width:800px;"&gt;
                              &lt;table id="mytable" &gt;
                                      &lt;td style="width:300px;background:white;"&gt;
                                         &lt;center&gt; &lt;div class="form-group"&gt;
                                                  &lt;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;"&gt;
                                          &lt;/div&gt;&lt;/center&gt;
                                       &lt;/td&gt;
  
                                       &lt;td style="width:50px ;text-align:right;background:white;"&gt; &lt;center&gt;&lt;strong&gt; in&lt;/strong&gt;&lt;/center&gt;    &lt;/td&gt;
  
                                       &lt;td style="width:400px;background:white;"&gt;
                                       &lt;center&gt;
                                               &lt;div class="input-group" style="position: relative;"&gt;
                                                     &lt;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;"&gt;
                                                     &lt;div class="input-group-btn" &gt;
                                                              &lt;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;"&gt;Select&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
  
                                                               &lt;!--City dropdown --&gt;
                                                                      &lt;div class="SearchCities" id="dialog" title="Basic dialog" &gt;
  
                                                                              &lt;div id="outer" style=""&gt;
  
  
  
                                                                                          &lt;div id="innerLeft" style=""&gt;
                                                                                              &lt;h5 &gt;North India:&lt;/h5&gt;
                                                                                              &lt;ul class="city" type="none";&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Delhi&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Agra&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Shrinagar&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Noida&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Himachal&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Patna&lt;/a&gt;&lt;/li&gt;
                                                                                              &lt;/ul&gt;
  
                                                                                          &lt;/div&gt;
  
                                                                                          &lt;div id="innerRight" style=""&gt;
                                                                                              &lt;a class="close"&gt;&amp;times;&lt;/a&gt;
                                                                                              &lt;h5&gt;West India:&lt;/h5&gt;
                                                                                              &lt;ul class="city" type="none";&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Mumbai&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Pune&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Nashik&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Kolhapur&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Osmanabad&lt;/a&gt;&lt;/li&gt;
                                                                                                      &lt;li&gt;&lt;a&gt;Ahamdabad&lt;/a&gt;&lt;/li&gt;
                                                                                              &lt;/ul&gt;
                                                                                          &lt;/div&gt;
  
  
                                                                              &lt;/div&gt;&lt;!--/outer--&gt;
                                                                          &lt;/div&gt;&lt;!--/SearchCities--&gt;
  
  
                                                               &lt;/div&gt;&lt;!-- /btn-group --&gt;
                                                     &lt;button type="button" class="btn btn-primary" style="margin-right:20px;"&gt;&lt;i class="icon-search" style="font-size:20px"&gt;&lt;/i&gt;  Search&lt;/button&gt;
                                               &lt;/div&gt;&lt;!-- /input-group --&gt;
                                             &lt;/center&gt;         
                                       &lt;/td&gt;
  
                              &lt;/table&gt;
                          &lt;/center&gt;
                      &lt;/form&gt;
  
      &lt;/div&gt;&lt;!--/col-lg-12--&gt;
  &lt;/div&gt;&lt;!--/row--&gt;
      &lt;/div&gt;&lt;!--/end of container--&gt;
  &lt;/section&gt;
  &lt;!--End of SearchBox section--&gt;
  </code></pre>
  
  <p>and following is my css for displaying that div:</p>
  
  <pre><code>.SearchCities {
    float: right;
    position:absolute;
    margin-top:3px;
    top: 100%;
    right:20px;
  
  }
  </code></pre>
  
  <p>so please help me ,and suggest any solution to achive above mentioned. .
  Thank u in advence.</p>
  
  <p>I have added <code>.searchCiries{z-index:1;}</code> and here is my output:
  <img src="https://i.stack.imgur.com/3ghcV.png" alt="enter image description here"></p>
  
  <p>I dont want the city names come out of the container div.So please suggest any correction</p>