Question

我的图像位置固定在页面中。当我重新调整浏览器的大小时，图像会覆盖我的页面内容，我该如何防止这种情况发生？

<div >
  <img id="img1" class="wrapperImage"></img>
</div>

 <style type="text/css">
   .wrapperImage
   {
   position : fixed;
   width:200px;
   height:100px
   }
  </style>

Answer 1

   .wrapperImage {
       position : fixed;
       width: 100%;
       max-width:200px;
       height:auto
   }

百分比大小会改善您的responsive design。

JSFIDDLE

Answer 2

尝试将z-index:-1;添加到您的CSS中。

Answer 3

您必须设置一个中央div并为其设置position:relative并为您设置图像 position:absolute在您的中央div和z-index中，您可以更改要显示的元素优先级，然后为您的图片设置z-index:10。

Answer 4

你可以这样做，即使你调整窗口大小，图像也会保持在同一个位置，

通过给父标签相对定位，并且子标签绝对，即使调整窗口大小，位置也不会改变

<div id="divname">
  <img id="img1" class="wrapperImage"></img>
</div>

 <style type="text/css">
   .divname{
      position:relative; 
   }

   .wrapperImage
   {
     position : absolute;
     z-index:-1;  //depending weather your image should appear 
                       at the above or below div change it to +1 or -1
     top: 100px;
     right: 100px; 
     width:200px;
     height:100px
   }
  </style>

调整窗口大小时修复图像位置

4 个答案: