1

我想在父 div 的同一级别上的 div 上方显示一个子 div（即在父容器内）。我可以使用 jQuery 和 CSS 来操作 z-index。在下面的示例中，我希望日历位于 gridRight 上方，但是 z-index 为 1000，gridRight 为 2，它仍然没有显示在其上方。用户可以拖动日历。我该怎么做才能让日历显示在 gridRight 上方？

- 元素具有属性位置：绝对

这是基本的 JSFiddle http://jsfiddle.net/LTRyd/1/

  • 我希望能够将红色方块移动到绿色方块上方，而黑色方块仍将显示在绿色方块下方。

    <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-->
4

1 回答 1

3

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

于 2012-06-21T13:42:32.183 回答