Question

我想在父div的同一级别上的div上方显示一个子div（在父容器内）。我可以使用jQuery和CSS来操纵z-index。在下面的示例中，我希望Calendar位于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-->

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的其他子项的堆叠

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

1 个答案: