title: Absolute element in relative parent - does not overlap other parents
body: <p>I have simple dialog, positioned absolutely in the center of the screen.
  There inside is one simple dropdown with relatively positioned parent(I wish dropdown to follow his parent position without js).
  But as I add relative position to his parent element dropdown does not overlap any other elements. This is normal behaviour I supose.</p>
  
  <p>But still I am triing to find pure css solution for this behaviour.</p>
  
  <p><strong>HTML and CSS</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      $("#dropDown_open").on("click", function() {
          $(".abs").toggle();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
  }
  
  #container {
      position: relative;
      width: 100%;
      height: 100%;
      background: yellow;
  }
  
  #container .dialog {
      position: absolute;
      left: calc(50% - 150px);
      top: calc(50% - 150px);
      width: 300px;
      height: 300px;
      background: white;
  }
  
  #container .dialog .preScroll {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  #container .dialog .header,
  #container .dialog .footer {
      height: 25px;
  }
  
  #container .dialog .scroller {
      height: calc(100% - 50px);
      width: 100%;
      background: blue;
      overflow: auto;
  }
  
  #container .dialog .scroller #dropDown_open {
      position: relative;
  }
  
  #container .dialog .scroller .abs {
      position: absolute;
      display: none;
      top: 120%;
      width: 150px;
      height: 200px;
      background: red;
      z-index: 9999;
  }
  
  ul {
      list-style: none;
  }
  
  ul li {
      font-size: 16px;
  }
  
  ul li:last-child {
      background: #FFF;
      padding: 5px;
      border: 1px solid black;
      border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
      &lt;div class="dialog"&gt;
          &lt;div class="preScroll"&gt;
              &lt;div class="header"&gt;header&lt;/div&gt;
              &lt;div class="scroller"&gt;
                  &lt;div&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/li&gt;
                          &lt;li id="dropDown_open"&gt;&lt;span&gt;Click me!&lt;/span&gt;&lt;div class="abs"&gt;&lt;/div&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="footer"&gt;footer&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So shortly: goal is that dropdown will overlap dialog itself if needed - should be visible on the top of the dialog when there is no space left.</p>
  
  <p>Here is jsFiddle(more accurate): <a href="http://jsfiddle.net/8p0jj2jk/1/" rel="nofollow">http://jsfiddle.net/8p0jj2jk/1/</a></p>