title: z-index not working css pseudo before, after
body: <p>I am trying to achieve css3 curved shadow effect in one of the div something like <strong><a href="http://www.paulund.co.uk/playground/demo/css_box_shadow/" rel="nofollow">this</a></strong>. However, I ran into z-index problem. Even-though I set parent as position relative and set higher z-index it is still not working. Pseudo elements shows up on top of element. Here is the <strong><a href="http://jsfiddle.net/7mMaT/" rel="nofollow">Fiddle</a></strong> that demonstrates my problem also the code below. Any help will be much appreciated.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="app-home-body-banners"&gt;
      &lt;div&gt;
          &lt;ul style="height: 100px"&gt;
          &lt;/ul&gt;
          &lt;br class="clear" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.app-home-body-banners
  {
      position: relative;
      z-index: 100;
      margin: 20px 0px 20px 0px;
      background-color: #E9E9E9; 
  }
  .app-home-body-banners:before, .app-home-body-banners:after
  {
      content:"";
      position:absolute;
      z-index:-1;
  }
  
  .app-home-body-banners:before
  {
      top:0px;
      bottom:0px;
      left:10px;
      right:10px;
      -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
      -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
      box-shadow:0 0 15px rgba(0,0,0,0.6);
      -moz-border-radius:100px / 10px;
      border-radius:100px / 10px;
  }
  
  .clear
  {
      float: none;
      clear: both;
      line-height: 1px;
  }
  </code></pre>