title: IE8 :after z-index
body: <p>I have seen oodles of examples to fix IE8's z-index insanity but none of them seems to help me in this case.</p>
  
  <p>I am styling a UL/LI-based 'breadcrumb' layout where graphically each breadcrumb can have one of 3 different background colors and each one has a 'slanted end-cap.' Here's how it looks in anything but IE8:</p>
  
  <p><img src="https://i.stack.imgur.com/hvEkJ.png" alt="enter image description here"></p>
  
  <p>Our initial naive-but-working implementation adds non-semantic markup between breadcrumbs with images of each of the possible overlap pairs - there are 9 combinations selected with a complex series of classes and JS when crumb-classes change. Ugh. I wanted to take a stab at another solution based on pseudo-elements that overlap the crumb to the right so we can ditch all the 'divider' stuff and logic.</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;ul class="breadcrumbs"&gt;
      &lt;li class="positive"&gt;positive&lt;/li&gt;
      &lt;li&gt;default&lt;/li&gt;
      &lt;li class="positive"&gt;positive&lt;/li&gt;
      &lt;li class="negative"&gt;negative&lt;/li&gt;
      &lt;li&gt;default&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I won't bore you with the padding and background and such, suffice to say that each of the backgrounds is a sliver that repeats - default (no class) is grey, positive is green, negative is red. For each default/positive/negative there is an image of a slant.</p>
  
  <p>Here's some CSS:</p>
  
  <pre><code>    ul.breadcrumbs
      {
          display: block;
          clear: both;
          position: relative;
          z-index: 10;
      }
      ul.breadcrumbs li
      {
          display: block;
          float: left; 
          position: relative;
          ...height,width,padding,etc.etc...
          background: url(sprite-x.png) repeat-x 0 -216px;
      }
      ul.breadcrumbs li.negative { background-position: 0 -243px; }
      ul.breadcrumbs li.positive { background-position: 0 -323px; }
  </code></pre>
  
  <p>That gives me my crumbs with the right colors. Now for the slants:</p>
  
  <pre><code>    ul.breadcrumbs li:after
      {
          content: "";
          display: block;
          position: absolute;
          top: 0; left: 100%;
          width: 24px;
          height: 100%;
          z-index: 1;
          background: url(sprite.png) no-repeat 0 -783px;
      }
      ul.breadcrumbs li.negative:after { background-position: 0 -864px; }
      ul.breadcrumbs li.positive:after { background-position: -25px -864px; }
  </code></pre>
  
  <p>This works great - each crumb 'picks' the right slant based on its class. it overlaps the crumb to the right so I have to make room for the slant to 'cover' part of it:</p>
  
  <pre><code>    ul.breadcrumbs li+li:before
      {
          content: "";
          display: block;
          float: left;
          width: 22px;
          height: 100%;
      }
  </code></pre>
  
  <p>All this works a treat, except for IE8:</p>
  
  <p><img src="https://i.stack.imgur.com/1kaoF.png" alt="enter image description here"></p>
  
  <p>The :after content is BEHIND the crumb to the right. I understand there is some 'resetting z-index' weirdness in IE8 having to do with positioned elements, but I HAVE to position the li's or the absolute positioning of the :after's won't work. I also won't know how many li's there might be, and I don't know what z-index it will be 'living' in on the pages.</p>
  
  <p>What magic z-index incantation will make IE8 happy?</p>