Question

在这个example中，有没有办法让Div＃4，Div＃5和Div＃6高于Div＃1？我已经读过z-index仅适用于在相同的堆叠上下文中的元素。所以这里，Div 4,5和6都在Div＃3的堆叠环境中。

在另一个示例中，如here所示，并将主div left属性更改为10％，子元素与body元素重叠。

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 10%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

他们有没有办法重叠“更高”的其他元素？堆叠上下文？

Answer 1

#2 z-index #1高于或等于position和static值，#2除外。（如果您将z-index的{{1}}更改为5，则会使#2的所有孩子都渲染到#1之上。）

有关z-index和stacking contexts here的更多信息。我还在那里制作了一个玩具（片段），可用于动态循环堆栈中的不同z-index值，以便您可以看到发生的情况。

让#2呈现#1以上的孩子的另一种方法是在position:static上设置#1。这样，z-index将不再适用。

如何在更高的堆叠上下文中使元素重叠元素？

1 个答案: