html - 如何使用 CSS 修复 slider 上的图像？

Question

我想修复 slider 上方的图像，我使用了以下代码。它得到修复，但问题是，如果我最小化浏览器或调整浏览器大小，图像会从该位置移动并占据它自己的位置。

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 .