title: z-index not working on position absolute negative
body: <p>Hi I'm making a progress bar with arrow as dividers, something like this:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          step 1
          &lt;span class="arrow"&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          step 2
          &lt;span class="arrow"&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          step 3
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>li{
      float: left;
      width: 25%;
      background-color: #4a4a4a;
      color: #fff;
      text-align: center;
      padding: 10px 0;
      position: relative;
      z-index: 100;
  }
  .arrow{
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-left: 30px solid red;
      display: block;
      position: absolute;
      right: -30px;
      top: 0px;
      z-index: 200;
  }
  </code></pre>
  
  <p><strong>DEMO</strong>: <a href="http://jsfiddle.net/pleasedontbelong/kGmg5/" rel="nofollow">http://jsfiddle.net/pleasedontbelong/kGmg5/</a></p>
  
  <p>But the arrows are always behind the <code>li</code> elements. Am I missing something? Is it possible to do this without changing the html?</p>