title: Is there a way to "force" z-index of childrens?
body: <p>This is my <a href="http://jsfiddle.net/BhQNr/2/" rel="nofollow noreferrer">code</a> :</p>
  <h1>HTML</h1>
  <pre><code>&lt;div class=&quot;item&quot;&gt;
      &amp;nbsp;
  &lt;/div&gt;
  
  &lt;div class=&quot;item&quot;&gt;
      &lt;div class=&quot;item-abs&quot;&gt;
          &amp;nbsp;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;item&quot;&gt;
      &amp;nbsp;
  &lt;/div&gt;​
  </code></pre>
  <h1>CSS</h1>
  <pre><code>.item
  {
      position:relative;
      z-index:5;
      float:left;
      background-color:red;
      width:100px;
      height:100px;
      margin:10px;
  }
  
  .item-abs
  {
      position:absolute;
      top:0px;
      left:40px;
      z-index:500;
      background-color:blue;
      width:100px;
      height:100px;    
  }
  ​
  </code></pre>
  <p>as you can see, if children have got 500 of z-index, is under the next parents. Is there a way to force the children z-index? Get riding the stack of the father? Or this scenario can't be done?</p>
  <p>I can't change z-index of parents, and I'd like to do it without setting a proper descent z-index with javascript...</p>