如何在显示时将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