title: Parent position:absolute and children z-index
body: <p>I want to have higher z-index for childrens .bricks so they could always overlap other parents (red square). Parent has to be positioned absolute. </p>
  
  <p>Live example: <a href="http://jsfiddle.net/yJ62e/" rel="nofollow">http://jsfiddle.net/yJ62e/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="cont"&gt;
  &lt;div class="draggable" id="b2"&gt;
  &lt;div class="brick"&gt;&lt;/div&gt;
  &lt;div class="brick"&gt;&lt;/div&gt;
  &lt;div class="brick"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="draggable" id="b2"&gt;
  &lt;div class="brick"&gt;&lt;/div&gt;
  &lt;div class="brick"&gt;&lt;/div&gt;
  &lt;div class="brick"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>    .cont {
      position:relative;
  background-color: #747373;
  height: 300px;
  width: 300px;
  margin:0 auto;
      }
  .draggable {
      background-color: red;
  right:100px;
  cursor:pointer;
  z-index:1;
  position:absolute;
  }
  
      #b2 {
  height: 100px;
  width: 100px;
  }
  
  .brick {
       background-color: blue;
  height: 50px;
  width: 50px;
  float: left;
  z-index:999 !important;
      }
  </code></pre>