Html CSS 永远在最前面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21386306/
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 Always On Top
提问by user3130731
I have a website with a fixed image at the top of my screen. When I scroll down my page the image stays at the top like it should. However, all content below overlaps my image and it is then covered.
我的屏幕顶部有一个固定图像的网站。当我向下滚动页面时，图像会像它应该的那样保持在顶部。但是，下面的所有内容都与我的图像重叠，然后被覆盖。
How do I make my top bar (image) always stay on top? I want it to cover the content of the page as you scroll.
如何让我的顶部栏（图像）始终保持在顶部？我希望它在您滚动时覆盖页面的内容。
回答by Jared Eitnier
Ensure positionis on your element and set the z-indexto a value higher than the elements you want to cover.
确保position在您的元素上并将 设置为z-index高于您要覆盖的元素的值。
element {
position: fixed;
z-index: 999;
}
div {
position: relative;
z-index: 99;
}
It will probably require some more work than that but it's a start since you didn't post any code.
它可能需要更多的工作，但这是一个开始，因为您没有发布任何代码。
回答by Salman A
Assuming that your markup looks like:
假设您的标记如下所示：
<div id="header" style="position: fixed;"></div>
<div id="content" style="position: relative;"></div>
Now both elements are positioned; in which case, the element at the bottom (in source order) will cover element above it (in source order).
现在两个元素都已定位；在这种情况下，底部的元素（按源顺序）将覆盖其上方的元素（按源顺序）。
Add a z-indexon header; 1should be sufficient.
z-index在标题中添加一个；1应该足够了。
