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

Question

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

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

我做了 z 索引所以下拉菜单确实位于顶部，但问题是，即使它位于顶部，下面的主菜单仍然显示。

这是jsfiddle

Answer 1

当您未设置 z-index 时，元素将遵循默认顺序显示在顶部：

When no element has a z-index, elements are stacked in this order (from bottom to top):

Background and borders of the root element

Descendant blocks in the normal flow, in order of appearance (in HTML)

Descendant positioned elements, in order of appearance (in HTML)

MDN

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

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

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

Fixed JSFiddle

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

How to get a html element to overlap another when it is displayed?

html

css

drop-down-menu

main

overlap