如何确保我的下拉菜单重叠并覆盖页面上的任何内容？

Question

我有一些自定义下拉列表css / jquery菜单，它们不会重叠（覆盖）浮动div中的某些文本。 div文本流入菜单。我怎样才能确保我的菜单会重叠我的页面上的任何内容，或者至少在这种情况下div中显示的文本？

Answer 1

您可以使用css z-index将元素定位在彼此之上。

有些代码有助于回答此问题，请更新您的问题或创建jsfiddle.net

Answer 2

如果您可以发布下拉菜单的CSS以及干扰它的浮动div，这将有所帮助，但这是一般的想法：

1）如果所讨论的元素具有比其他元素更高的z-index值，那么具有相对，固定或绝对定位的任何元素将出现在具有这些类型的定位之一的其他元素之上。

2）具有绝对或固定定位的元素将出现在具有相对或静态定位的元素的顶部。例外情况是，相对定位的元素被赋予了更高的z指数值。

3）对于相对和静态元素，页面后面的元素将与之前的元素重叠。上面＃2中的相同例外也适用于此。

Answer 3

重要的是堆叠环境。 来自https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context：

通过

中的任何元素，在文档中的任何位置形成堆叠上下文

• 根元素（HTML），
• 定位（绝对或相对）z-index值不是“auto”，
• （在Gecko / Mozilla浏览器中）不透明度值小于1的元素。

假设您有两个div，第一个包含您的菜单，第二个包含浮动。如果两个div都有position：relative，它们都有堆叠上下文，但第二个div将堆叠在第一个上面。

Puttin z-index：第一个div上的1解决了问题（试试这个例子jsfiddle.net/sPKY6 /）。

这也有帮助：http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/