Question

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?

-The elements have the property position: absolute

Here is the basic JSFiddle http://jsfiddle.net/LTRyd/1/

• 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.

  <div id="mainContainer" class="mainContainer">
       <div id="grid1" class="grid"> <!--Has to have Z-Index of 1-->
            <div id="Calendar" class="item"></div> <!--Z-Index of 1000-->
  </div>            
  </div>
  <div id="gridLeft" class="gridLeft"></div> <!--Has to have Z-Index of 2-->
  <div id="gridRight" class="gridRight"></div> <!--Has to have Z-Index of 2-->
  

Answer 1

Z-Index only takes effect on positioned elements.

You will have to alter your CSS to position the elements you want z-indexed:

#Calendar
{
  position: relative;
  z-index: 20;
}

#grid2
{
  position: relative;
  z-index: 10;
}

edit:

“Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.”

The stacking context – MDN

Essentially, stacking is resolved within the parent element. All stacking occurs within the parent, and then that parent’s stacking order is in the context of its other siblings, regardless of the stacking order of the children within it.

So while Calendar will have a z-index of 1000, that z-index will only apply against the stacking of other children of grid1