CSS Divs重叠,我如何强制一个在另一个之上？

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集合的任何元素来使所有浏览器的行为相同.

Answer 2

利用CSS z-index属性将解决您的问题

.myclass
{
  z-index:1;
}