如何使用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; 
}