title: Absolute positioned element in relative parent does not overlap other elements
body: <p>I have a list (ul - li) where the li's float so I have a grid with blocks.
  Every li has position relative. </p>
  
  <p>Inside every li I have a div (with class 'more') that is hidden and only showed if you hover a it's parent li. The .more div I want to attach STARTING at the bottom of the li going down and OVERLAPPING any other li's without pushing this other li's away/down.
  Because it's attached to the bottom I set the bottom position of the .more div to a negative value matching the exact height of the more div. </p>
  
  <p>This more or less works but the .more div is always shown UNDER the other li's. It's only overlapping it's parent.</p>
  
  <p>I tried already to give all the li's a static z-index of 5 and all the .more div's a static z-index of 500, but this still doesn't help.</p>
  
  <p>A made a jsFiddle of it all: <a href="http://jsfiddle.net/yNS6R/" rel="nofollow noreferrer">http://jsfiddle.net/yNS6R/</a></p>
  
  <p>Relevant code:</p>
  
  <pre><code>    ul li
      {
          background: yellow;
          border: 1px solid green;
          float: left;
          height: 200px;
          margin: 0 10px 10px 0;
          position: relative;
          width: 22%;
          z-index: 2;
      }
  
      ul li .more
      {
          background: red;
          border-bottom: 1px solid green;
          border-left: 1px solid green;
          border-right: 1px solid green;
          bottom: -50px;
          display: none;
          height: 50px;
          left: -1px;
          position: absolute;
          width: 100%;
          z-index: 500;
      }
  
      ul li:hover .more
      {
          display: block;
      }
  </code></pre>