CODEWITHSUNDEEP
javascriptjquerycsshtml
Marc
Marc

Reputation: 571

Show Child Div Above Elements on Parent Div Level using z-index

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/

Upvotes: 1

Views: 1795

Answers (1)

Christian Benincasa
Christian Benincasa

Reputation: 1215

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

Upvotes: 3

Related Questions