如何使用CSS在滑块上修复图像？

Question

我想修复滑块上方的图像，我使用了下面的代码。它被固定，但问题是，如果我最小化或调整浏览器的大小，图像将从该位置移动并占据自己的位置。

CSS：

.imageover{ 
     background:transparent; 
     bottom: 0; 
     color: #FFFFFF; 
     left: 0; 
     position: absolute; 
     width: 100%; 
     z-index: 8; 
    opacity:1.0!important 
} 

HTML：

<div class="topbanner" width=1000px> 
    <div class ="imageover"> 
     <img src="images/greendesign.png" width =350/> 
    </div> 
    <div id="sliderFrame"> 
     <div id="slider"> 
      <img src="images/slider1.png"/> 
      <img src="images/slider2.jpg" /> 
      <img src="images/slider3.jpg" /> 
      <img src="images/slider4.jpg" /> 
      <img src="images/slider5.jpg" /> 
      <img src="images/slider6.jpg" /> 
     </div> 
    </div> 
</div> 

Answer 1

使用position: fixed;如果你想固定在页面上的位置，并通过滚动的影响的图像。

.imageover{ 
    background: none; 
    bottom: 0; 
    color: #FFFFFF; 
    left: 0; 
    position: fixed; 
    width: 100%; 
    z-index: 8; 
    opacity: 1.0 !important 
} 

更多关于position财产here。

Answer 2

假设你的其他的CSS设置（sliderFrame等）是否正确，并没有其他特殊要求的存在，我会做这样的：

演示：http://jsfiddle.net/uZhS4/

HTML

<div class="topbanner" width="1000px"> 
    <div class ="imageover"></div> 
    <div id="sliderFrame"> 
     <div id="slider"> 
      <img src="images/slider1.png"/> 
      <img src="images/slider2.jpg" /> 
      <img src="images/slider3.jpg" /> 
      <img src="images/slider4.jpg" /> 
      <img src="images/slider5.jpg" /> 
      <img src="images/slider6.jpg" /> 
     </div> 
    </div> 
</div> 

CSS

.imageover{ 
     background: transparent url(images/greendesign.png) no-repeat center top; 
     height: 150px;  /* set your image height here */ 
     z-index: 8; 
     overflow: hidden; 
}