Html 滚动时如何使图像静止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18425511/
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
How to make an image static when scrolling
提问by Nicole Reid
So I have a border at the top of the page and I want it to stay in the same spot when I scroll down. I've tried putting position: fixed in many different spots and still can't make it work. Also, I would like the other content to scroll behind this image if possible. This is my code:
所以我在页面顶部有一个边框，当我向下滚动时，我希望它保持在同一个位置。我试过放置 position: 固定在许多不同的位置，但仍然无法使其工作。此外，如果可能，我希望其他内容滚动到此图像后面。这是我的代码：
<div style='
background-image: url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);
background-repeat: repeat-x;'>
<img src="http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif">
</div>
it's for the page nikkidarlinggg.tumblr.com sorry If I'm not typing this correctly, I've never used this site before.
这是页面 nikkidarlinggg.tumblr.com 抱歉，如果我没有正确输入，我以前从未使用过这个网站。
采纳答案by zigdawgydawg
Add these styles to the div:
将这些样式添加到 div：
position: fixed;
width: 100%;
z-index: 10;
回答by Charaf JRA
This will solve your problem :
这将解决您的问题：
<div class='fixed' ></div>
<div class='content'>Your content here </div>
and fixed class :
和固定类：
.fixed{
position:fixed;
top:0;
z-index: 1;
width:100%;
height:100%;
background-image:url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);background-
repeat: repeat-x;
}
.content{margin-top:57px;}
using css inside css inside your html :
在 html 中的 css 中使用 css ：
<div style="position:fixed; top:0; z-index: 1; width:100%;height:100%;background-image:url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);background-repeat: repeat-x;" >
</div>
<div style='margin-top:57px;'>Your content here </div>
DEMO HERE : http://jsfiddle.net/Nsuj7/
演示在这里：http: //jsfiddle.net/Nsuj7/
回答by William Yang
Have you tried: position:absolute?
你有没有试过：position:absolute？
回答by chiliNUT
<div style="background-image: url(http://i111.photobucket.com/albums/n144/baby_painting/bowlace2.gif);background-repeat: repeat-x;position:fixed;width:100%;z-index:2;height:57px"></div>
Try this, using z-index 2 or any above value.
试试这个，使用 z-index 2 或任何以上的值。
