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

Question

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

例如，我有一个移动的回应式网站，并在主菜单工作正常，但是当我调整浏览器窗口小，复制一个小屏幕，如移动电话....一个具有下拉列表的主菜单项显示在其他主菜单项的顶部。这意味着主菜单下拉项目显示在正下方的一些主菜单文本的顶部！

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

这是jsfiddle

Answer 1

当你不设置z-index，元素遵循其顶部被显示的默认排序：

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

1. 根元素的背景和边框
个
2. 在正常流动后裔块，在外观上（在HTML）
3. 后代定位元素，的顺序在外观（在HTML）

MDN

在HTML的顺序子菜单的ul出现在其他菜单项的HTML之前，因此其他菜单项出现在子菜单的背景上。

为了解决这个问题，设置一个z-index使得ul的背景将被提升：

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

Fixed JSFiddle