Question

所以我在页面顶部有一个边框，我想让它在向下滚动时保持在同一个位置。我已经尝试过将位置：固定在许多不同的位置，仍然无法使其工作。另外，如果可能的话，我希望其他内容在此图像后面滚动。这是我的代码：

    <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>

这是页面nikkidarlinggg.tumblr.com 抱歉，如果我没有正确输入，我以前从未使用过此网站。

Answer 1

这将解决您的问题：

   <div  class='fixed' ></div>
   <div class='content'>Your content here </div>

和固定班级：

.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;}

在你的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/

Answer 2

您是否尝试过：position:absolute？

Answer 3

<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>

尝试使用z-index 2或任何上述值。

Answer 4

将这些样式添加到div：

position: fixed;
width: 100%;
z-index: 10;

如何在滚动时使图像保持静态

4 个答案: