Html CSS Divs 重叠，我如何强制一个在另一个之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6354149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Divs overlapping, how do I force one above the other?
提问by Orun
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!
谢谢！
回答by Mark Kahn
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: absoluteorposition: relativeand a z-index - Elements that are partially transparent, that is they have an opacity < 1
- In IE7, any element with
position: absoluteorposition: relative(this can cause many bugs since it is the only browser that acts this way)
- 文档根
- 带有
position: absoluteorposition: relative和 z-index 的元素 - 部分透明的元素，即它们的不透明度 < 1
- 在 IE7 中，任何带有
position: absolute或的元素position: relative（这可能会导致许多错误，因为它是唯一以这种方式运行的浏览器）
If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1to any element that also has some positionset.
如果 IE7 是一个问题，您可以通过始终添加z-index : 1到任何也有一些position设置的元素来使所有浏览器的行为都相同。
回答by Pranay Rana
Make use of CSS z-index Propertywill resolve your issue
使用CSS z-index 属性将解决您的问题
.myclass
{
z-index:1;
}
for your problem have look : Layer on layer with z-index (Layers)
对于您的问题，请查看：使用 z-index (Layers) 进行分层
回答by Deeptechtons
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;}
