title: Show Child Div Above Elements on Parent Div Level using z-index
body: <p>I want to show a child div (That is within a parent container) above a div on the same level of the parent div. I can use jQuery, and CSS to manipulate the z-index. In the example below, I want the Calendar to be position above the gridRight, however with a z-index of 1000 and the gridRight at 2, it still does not show above it. The user is able to drag the Calendar around. How can I do this so Calendar shows above gridRight?</p>
  
  <p>-The elements have the property position: absolute</p>
  
  <p>Here is the basic JSFiddle <a href="http://jsfiddle.net/LTRyd/1/" rel="nofollow">http://jsfiddle.net/LTRyd/1/</a></p>
  
  <ul>
  <li><p>I want to be able to move the red square above the green square, all while the black square will still show below the green square.</p>
  
  <pre><code>&lt;div id="mainContainer" class="mainContainer"&gt;
       &lt;div id="grid1" class="grid"&gt; &lt;!--Has to have Z-Index of 1--&gt;
            &lt;div id="Calendar" class="item"&gt;&lt;/div&gt; &lt;!--Z-Index of 1000--&gt;
  &lt;/div&gt;            
  &lt;/div&gt;
  &lt;div id="gridLeft" class="gridLeft"&gt;&lt;/div&gt; &lt;!--Has to have Z-Index of 2--&gt;
  &lt;div id="gridRight" class="gridRight"&gt;&lt;/div&gt; &lt;!--Has to have Z-Index of 2--&gt;
  </code></pre></li>
  </ul>