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
部分透明的元素，即它们具有不透明度＆lt; 1
在IE7中，任何包含position: absolute或position: relative的元素（这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器）

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

Answer 2

利用CSS z-index Property解决您的问题

.myclass
{
  z-index:1;
}

Answer 3

这应该这样做，绝对位置你的元素总是根据你指定的Top，Left值定位

div#floater {    position: absolute;     top: 420px;     left: -110px;   }
div#floater:hover {    left: 0;}