css - Z-index:如何使嵌套元素显示在其父元素下方

Question

这个 fiddle 应该可以证明这个问题:

http://jsfiddle.net/5sqxQ/2/

我希望子菜单显示在父菜单下方。然后我想用 JavaScript 扩展它，以便在鼠标悬停在父 li 元素上时从下方滑动菜单。

不关心 JavaScript，但不知道如何设置元素的样式以实现所需的分层。

Answer 1

它不起作用，因为您将 z-index 应用于父元素，这使得子元素相对于父元素中的其他元素堆叠。

Once you assign an element a value for z-index (other than auto), that element establishes its own local stacking context. This means that all of the element's descendants have their own stacking order, relative to the ancestor element.

因此，如果父项有 z-index: 9 而子项是 z-index: 8，这有点像分配 的 z-index 9、8

参见 the article here以获得更好的解释。

如果您删除父级上的 z-index 并将同级元素设置为 z-index: -1，那应该可以工作。我不确定所有浏览器，但它在 Chrome 中仍然有效。

这是 updated fiddle

希望对您有所帮助。