css - 下拉菜单与较低的 div 重叠

Question

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

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

Answer 1

'z-index'
...
For a positioned box, the 'z-index' property specifies:

The stack level of the box in the current stacking context. Whether the box establishes a stacking context. Values have the following meanings:

• <integer>
  This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.
• auto
  The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

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

所有周围元素的 z-index 都是 0，这意味着它们没有定义新的堆叠顺序，而是按照它们出现的顺序堆叠.

因此，您可以简单地应用 1 的 z-index 来将有问题的元素从自然堆叠顺序中取出。

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

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

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