Z-index：如何使嵌套元素出现在其父元素下方
这个小提琴应该演示这个问题：
我想要子菜单显示在父菜单下方。然后我想用 JavaScript 来扩展它，以便在悬停在父 li 元素上时从下面滑动菜单。
对 JavaScript 不感兴趣，但不知道如何设计元素的样式以实现所需的分层。
This fiddle should demonstrate the issue:
I want the sub menu to appear underneath the parent menu. I was then was looking to extend this with JavaScript to slide the menu from underneath on hover of the parent li element.
Not fussed about the JavaScript but can't figure out how to style the elements to achieve the desired layering.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
它不起作用，因为您将 z-index 应用于父元素，这使得子元素相对于父元素中的其他元素堆叠。
因此，如果父级的 z-index 为
z-index: 9而子级的 z-index: 8，则类似于分配 z-index 为9, 8请参阅此处的文章以获得更好的解释。
如果您删除父元素上的 z-index 并将同级元素设置为
z-index: -1，那么应该可以工作。我不确定是否适用于所有浏览器，但无论如何它都可以在 Chrome 中使用。这是更新的小提琴
希望有所帮助。
It doesn't work because you are applying a z-index to the parent element which makes the child element stack relative to the other elements within the parent.
So if the parent has
z-index: 9and the child isz-index: 8, it's kind of like assigning a z-index of9, 8See the article here for a better explanation.
If you remove the z-index on the parent and set the sibling element to
z-index: -1, that should work. I'm not sure about all browsers, but it works in Chrome anyway.Here is the updated fiddle
Hope that helps.
你不知道。
相反，将
a设为“登录”“按钮”。像这样的东西： http://jsfiddle.net/5sqxQ/15/
You don't.
Instead, make the
abe the "Sign In" "button".Something like this: http://jsfiddle.net/5sqxQ/15/
尝试将父容器和同级容器位置设置为相对位置。
它以前对我有用。
Try setting the parent and siblings containers position to relative.
Its worked for me before.
查看下面的规则，了解元素如何堆叠，您可以轻松想出自己的解决方案。
前任。就像三十点所说，输入“登录”
.users >力> a位置，相对或绝对，以及z-index: 1下面的堆叠顺序和堆叠上下文规则来自此链接
Stacking Order inside a Stacking Context
元素的顺序
元素是唯一的堆叠上下文，但任何元素都可以是堆叠上下文的根元素，请参阅下面的规则）当形成堆叠上下文时
元素）Look at the rules below for how elements are stacked and you can easily come up with your own solution.
ex. Like thirtydot said, give "Sign In"
.users > li > aa position,relativeorabsolute, andz-index: 1The Stacking order and stacking context rules below are from this link
Stacking Order within a Stacking Context
The order of elements:
<html>element is the only stacking context by default, but any element can be a root element for a stacking context, see rules below)When a Stacking Context is Formed
<html>element)