javascript - 使用 z-index 在父 Div 级别的元素上方显示子 Div

Question

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

-元素有属性position: absolute

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

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

  <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 只对定位元素生效。

你将不得不改变你的 CSS 来定位你想要 z-indexed 的元素:

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

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

编辑:

“在一个堆叠上下文中，子元素根据前面解释的相同规则堆叠。重要的是，其子堆叠上下文的 z-index 值仅在该父级中有意义。堆叠上下文被原子地视为一个单元父堆栈上下文。”

The stacking context - MDN

本质上，堆叠是在父元素内解决的。所有堆叠都发生在父级中，然后该父级的堆叠顺序在其其他兄弟的上下文中，而不管其中子级的堆叠顺序如何。

因此，虽然 Calendar 的 z-index 为 1000，但该 z-index 仅适用于 grid1

的其他子项的堆叠