下拉菜单重叠较低的div

Question

问题可以在我的测试网站上找到：http://udkcf.geekgirlcoding.com/

我创建了一个下拉菜单（顶部的灰色框）。当我展开菜单时，菜单项与品牌div或网站内容重叠。我尝试设置/更改z-index值，但没有运气。

Answer 1

在样式表中添加以下代码。

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
  z-index: -999;
  position: relative;
}

Answer 2

  

<强>＆＃39; z索引＆＃39;
  ...
  对于定位框，＆quot; z-index＆＃39; property指定：

     

当前堆叠上下文中框的堆栈级别。   框是否建立堆叠上下文。   值具有以下含义：

     

  
• ＆LT;整数＆GT;
    此整数是当前堆叠上下文中生成的框的堆栈级别。该框还会建立新的堆叠上下文。
  
• 自动
    当前堆叠上下文中生成的框的堆栈级别为0.除非是根元素，否则该框不会建立新的堆叠上下文。
  

     

http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index

所有周围的元素都会有z-index 0 ，这意味着他们不会定义新的堆叠顺序，并会按照它们出现的顺序进行堆叠。

因此，您只需应用z-index 1 即可从自然堆叠顺序中获取相关元素。

这将告诉浏览器您希望该元素高于其他所有元素

• 除非以下任何元素具有相同的z-index值
• 或有任何元素，可能在之前或之后，具有更高 z-index值。

.dl-menuwrapper {
    z-index: 1;
}