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

I'm new to CSS and trying to build my site. I'm coming across a problem. I've created a div with a fixed position, however it is appearing below other elements on the site. How do I force it to the top?

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

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

div#floater:hover {
    left: 0;

The site can be found at goinnativerecords.com (hover over the images to the side). I know my coding isn't the cleanest (tips are appreciated).

该网站可以在goinnativerecords.com找到（将鼠标悬停在图像旁边）。我知道我的编码不是最干净的（提示很受欢迎）。

Thanks!

谢谢！

3 个解决方案

#1

simply use z-index:

只需使用z-index：

z-index : 1;

Note that z-index only works on elements that have some kind of positioning set (relative, absolute, fixed)

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

nuances:

细微差别：

Elements with a higher z-index will appear in front of elements with a lower z-index in the same stacking context. If two elements have the same z-index, the latter one appears on top. Stacking context is defined by:

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

The Document Root
文档根目录
Elements with position: absolute or position: relative and a z-index
具有位置的元素：绝对或位置：相对和z指数
Elements that are partially transparent, that is they have an opacity < 1
部分透明的元素，即它们的不透明度<1
In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)
在IE7中，任何具有position：absolute或position：relative的元素（这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器）

If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1 to any element that also has some position set.

如果IE7是一个问题，您可以通过始终将z-index：1添加到也具有某个位置集的任何元素来使所有浏览器的行为相同。

#2

Make use of CSS z-index Property will resolve your issue

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

.myclass
{
  z-index:1;
}

for your problem have look : Layer on layer with z-index (Layers)

你的问题看起来：带有z-index的图层（图层）

#3

this should do it, with Absolute position your elements are always positioned according to Top, Left value you specify

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

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

#1