如何使用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的更多信息。