title: How to get this search-results-div to show up on top of content, without interfering with nearby float elements?
body: <p>I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)</p>
  
  <p><a href="https://jsfiddle.net/dowxw1dz/2/" rel="nofollow">https://jsfiddle.net/dowxw1dz/2/</a></p>
  
  <p>In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.</p>
  
  <p>The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.</p>
  
  <p><strong>How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar?</strong> Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="width:600px;"&gt;
  
    &lt;input type="button" value="Button!" style="float:right; width:100px;"/&gt;
  
    &lt;span style="float:right"&gt; Category &lt;/span&gt;
    &lt;div class="inputRow"&gt;
      &lt;input type="text" id="input"/&gt;
      &lt;div class="searchResults"&gt;
        Results!
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="width:600px;"&gt;
    There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.searchResults {
    position:absolute; 
    top:100%; 
    background-color: white; 
    border: 1px solid black; 
    z-index: 50;
    display: none;
  }
  
  .inputRow {
    position:relative;
    overflow:auto;
  }
  
  input {
    width: 98%;
  }
  
  div {
    z-index: 0;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("#input").change(function() {
      $(".searchResults").show();
  });
  </code></pre>