如何让一个html元素在显示时与另一个元素重叠？答案

【问题标题】：How to get a html element to overlap another when it is displayed?如何让一个html元素在显示时与另一个元素重叠？
【发布时间】：2016-11-28 21:35:24
【问题描述】：

#nav ul ul li {
    display: block;
    font-color: blue;
    font-size: 1.5em;
    z-index: 1;
    position: relative;
}

例如，我有一个移动响应站点，主菜单工作正常，但是当我将浏览器窗口调整为小时，以复制手机等小屏幕.... 主菜单项之一下拉列表显示在其他主菜单项的顶部。这意味着主菜单下拉项显示在一些主菜单文本的正下方！

我已经完成了 z 索引，所以下拉菜单确实位于顶部，但问题是，即使它位于顶部，下方的主菜单仍会显示。

【问题讨论】：

【解决方案1】：

当您不设置 z-index 时，元素会遵循默认排序，并显示在顶部：

当没有元素具有 z-index 时，元素按此顺序堆叠（从下到上）：

根元素的背景和边框

正常流程中的后代块，按出现顺序（在 HTML 中）

后代定位元素，按出现顺序（在 HTML 中）

MDN

在您的 HTML 中，子菜单的 ul 出现在其他菜单项的 HTML 之前，因此其他菜单项显示在子菜单背景的顶部。

要解决此问题，请设置z-index，以便提升ul 的背景：

#nav ul ul {
  z-index: 1;
}

【讨论】：

你是国王！
@AshleyYoung 大声笑，谢谢。不过，在未来，让我们试着让这个过程变得更顺畅。这有点像过山车，如果我们从一开始就有完整的代码，我或其他人本可以更快地回答。感谢您与我们合作。