title: Negative z-index element appears above background of containing element
body: <p>I'm attempting to make a CSS3 animated menu but I'm running into an issue where low-index elements are appearing on top of the containing elements, which ruins the "sliding out" effect.</p>
  
  <p>The HTML is:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;&lt;title&gt;CSS3 Experiments&lt;/title&gt;&lt;/head&gt;
    &lt;body class="menu-metal effect-hovermenu"&gt;
      &lt;div id="main"&gt;
        &lt;div id="container"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;div class="name"&gt;&lt;span&gt;Effect: Hover Menu&lt;/span&gt;&lt;/div&gt;
              &lt;div class="short"&gt;&lt;span&gt;Display menu on hover&lt;/span&gt;&lt;/div&gt;
              &lt;div class="long"&gt;&lt;span&gt;A CSS3-transition enabled hover menu based on the design at http://www.webdesignerwall.com/demo/css3-dropdown-menu/ .&lt;/span&gt;&lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The condensed relevant CSS is</p>
  
  <pre><code>.effect-hovermenu #container li {
    overflow: visible;
    z-index: 5;
    position: relative;
  }
  .effect-hovermenu #container li .short {
    position: absolute;
    width: 100%;
    left: 0%;
    top: 5px;
    z-index: -1000;
    opacity: 1 !important;
    color: black;
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: ease-in;
    visibility: hidden;
  }
  .effect-hovermenu #container li:hover .short {
    left: 110%;
    visibility: visible;
  }
  </code></pre>
  
  <p>A working demonstration of the issue is available at <a href="http://jsfiddle.net/scottrabin/FxZrz/" rel="nofollow">http://jsfiddle.net/scottrabin/FxZrz/</a> . I've tried setting the <code>position</code> property on multiple elements, modifying the <code>z-index</code> values, <code>overflow</code>, and finally realized I was shooting in the dark and not getting any closer to an answer.</p>
  
  <p>In particular, the undesired effect is on hovering over the element; during the transition period, the text is switched to <code>visibility: visible;</code>, and it immediately renders on top of the button element. The ideal behavior would have the element render beneath the <code>ul</code> so it would appear to slide out from "behind" the menu.</p>