下拉菜单重叠较低的div

时间:2015-06-12 04:22:03

标签: css

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

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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

  

<强>&#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;
}

screenshot of solution