如何在显示时将html元素与另一个重叠?

时间:2016-07-25 13:47:22

标签: html css drop-down-menu main overlap

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

Current output 例如,我有一个移动响应网站,主菜单工作正常,但当我将浏览器窗口调整为小,复制一个小屏幕,如手机....其中一个主菜单项下拉列表显示在其他主菜单项的顶部。这意味着主菜单下拉项目直接显示在一些主菜单文本的顶部!

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

这是jsfiddle

1 个答案:

答案 0 :(得分:0)

如果您未设置z-index,则元素会按默认排序显示在顶部:

  
    

当没有元素具有z-index时,元素按此顺序堆叠(从下到上):

         
        
  1. 根元素的背景和边框
  2.     
  3. 正常流程中的后代阻塞,按外观顺序(以HTML格式)
  4.     
  5. 后代按照外观(以HTML格式)
  6. 定位元素        
     

MDN

在您的HTML中,子菜单的ul出现在其他菜单项的HTML之前,因此其他菜单项会显示在子菜单的背景之上。

要解决此问题,请设置z-index,以便宣传ul的背景:

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

Fixed JSFiddle