Z-index:如何使嵌套元素出现在其父元素下面

Question

这个小提琴应该证明这个问题:

我希望子菜单显示在父菜单下面.我当时正在寻求用JavaScript扩展这个以在父li元素的悬停下从下面滑动菜单.

没有关于JavaScript的讨论,但无法弄清楚如何设置元素的样式以实现所需的分层.

Answer 1

因为你申请的z指数,这使得相对于其他元素的子元素堆栈中的父元素它不工作,父之内.

为元素分配z-index(auto除外)的值后,该元素将建立自己的本地堆栈上下文.这意味着相对于祖先元素,所有元素的后代都有自己的堆叠顺序.

因此,如果父母z-index: 9和孩子一样z-index: 8,那就像分配一个z-index一样9, 8

请参阅此处的文章以获得更好的解释.

如果删除父项上的z-index并将兄弟元素设置为z-index: -1,则应该有效.我不确定所有浏览器,但无论如何它都适用于Chrome.

希望有所帮助.

使用负z指数有什么不愉快？任何整数都是完全有效的.而imho,如果你想让某些东西出现在它的父母身后(你正在向后移动孩子,而不是向前移动父母),它实际上在语义上会更好* (2认同)
您是否看过更新的演示(http://jsfiddle.net/5sqxQ/17/)？用`z-index:-1`完全覆盖元素的红色背景是*令人不快的*. (2认同)

Answer 2

你不知道

而是将其a设置为“登录”“按钮”。