title: Overlay a div inside a list item
body: <p>I'm trying to implement auto-complete inside a form item, where as the user types it creates a dropdown menu with a list of suggestions, which are clickable. This is done inside the <a href="http://ionicframework.com" rel="nofollow">Ionic Framework</a>.</p>
  
  <p>I've made a codepen to demonstrate what I want. (look at the auto-complete field, and the grey hidden box below it)</p>
  
  <p><a href="http://codepen.io/pbernasconi/pen/Cgobi" rel="nofollow">http://codepen.io/pbernasconi/pen/Cgobi</a></p>
  
  <p>My dropdown:</p>
  
  <pre><code>&lt;div class="list"&gt;
    &lt;label class="item item-input item-stacked-label"&gt;
      &lt;span class="input-label"&gt;License #&lt;/span&gt;
      &lt;input type="text" placeholder="AUTO COMPLETE FIELD"&gt;
      &lt;div class="input-dropdown"&gt;
        &lt;ul class="input-dropdown-menu"&gt;
          &lt;li&gt;...&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.input-dropdown {
      position: absolute;
      background: grey;
      border: solid 1px #000;
      z-index: 1001;
      overflow: visible;
  }
  
  .input-dropdown-menu {
  }
  </code></pre>
  
  <p>This issue is that <code>position: absolute</code> doesn't allow me to overlay over the list item below the auto-complete field, as you can see in the codepen.</p>
  
  <p><a href="http://jsfiddle.net/Matt_Coughlin/C4Qy2/1/" rel="nofollow">Here's an example of a solution</a>, which for some reason doesn't work for me.</p>
  
  <p>Does anyone know how to implement this dropdown to overlay over it's parent's?</p>