CSS Div 重叠，如何强制一个在另一个之上？

Question

我是 CSS 的新手，正在尝试构建我的网站。我遇到了一个问题。我创建了一个具有固定位置的 div，但它出现在网站上其他元素的下方。我如何强制它到顶部？

div#floater {
    position: fixed; 
    top: 420px; 
    left: -110px;   
}

div#floater:hover {
    left: 0;

可以在 goinnativerecords.com 找到该网站(将鼠标悬停在旁边的图像上)。我知道我的编码不是最干净的(感谢提示)。

谢谢!

Answer 1

简单地使用 z-index:

z-index : 1;

请注意，z-index 仅适用于具有某种定位集(相对、绝对、固定)的元素

细微差别:

具有较高 z-index 的元素将出现在具有较低 z-index 的元素前面在相同的堆叠上下文中。如果两个元素具有相同的 z-index，则后者出现在顶部。堆叠上下文定义为:

• 文档根目录
• 具有 position: absolute 或 position: relative 和 z-index 的元素
• 部分透明的元素，即它们的不透明度 < 1
• 在 IE7 中，任何具有 position: absolute 或 position: relative 的元素(这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器)

如果 IE7 是一个问题，您可以通过始终将 z-index : 1 添加到还设置了一些 position 的任何元素来使所有浏览器的行为相同。