html - 图像不在原地，随着窗口的调整而拖动

Question

当我在页面上放置一些图像时，它们会在我尝试时在屏幕上移动并调整浏览器窗口的大小。我在 css 中谈论的图像被编码为 .ex { position: absolute;顶部:200px；右 200px； } 并且它们在屏幕上移动，但有些没有。为什么会发生这种情况，我该如何预防。

#logo {
  text-align: center;
  position: absolute;
  top: 0;
  right: 750px;
}

#logoleft {
  float: left;
  position: absolute;
  top: 0;
  left: 500px;
}

#logoright {
  float: right;
  position: absolute;
  top: 0;
  right: 420px;
}

#leftleft {
  position: absolute;
  left: 270px;
}

#rightright {
  position: absolute;
  right: 180px;
}

#bdlogo {
  position: absolute;
  top: 500px;
  left: 220px;
}

#logobelow {
  position: absolute;
  top: 150px;
  right: 750px;
}

#logoprayer {
  position: absolute;
  right: 200px;
  top: 500px;
}

#gc {
  position: fixed;
  top: 10px;
  right: 20px;
}

#ib {
  position: fixed;
  top: 10px;
  left: 70px;
}

#fc {
  position: fixed;
  top: 350px;
  right: 1040px;
}

<div id="rightright"><img src="data/pics/mr.png" width="140px;" height="140px;">
  <!--randomness-->
</div>
<div id="leftleft"><img src="data/pics/lr.png" width="140px;" height="140px;">
  <!--randomness-->
</div>
<div id="logoleft"><img src="data/pics/wom.png" width="145px" height="340px">
  <!--randomness-->
</div>
<div id="logo">
  <a href="index.html"><img src="data/pics/rslogo.png" width="450px;" height="170px;">
    <!--randomness-->
  </a>
</div>
<div id="logoright"><img src="data/pics/emt.png" width="245px;" height="340px;">
  <!--randomness-->
</div>
<div id="bdlogo"><img src="data/pics/bd.gif">
  <!--randomness-->
</div>
<div id="logobelow">
  <a href="index.html"><img src="data/pics/fs.png">
    <!--randomness-->
  </a>
</div>
<div id="logoprayer"><img src="data/pics/rc.gif" width="195px;" height="300px;">
  <!--randomness-->
</div>
<div id="gc"><img src="data/pics/gc.png" width="95px;" height="95px;">
  <!--randomness-->
</div>
<div id="ib"><img src="data/pics/ib.png" width="65px;" height="65px;">
  <!--randomness-->
</div>
<div id="fc"><img src="data/pics/fc.png" width="90" ; height="90" ;>
  <!--randomness-->
</div>

Answer 1

您的某些元素定位固定(position:fixed)，这将导致元素位置停留在浏览器 View 点的相同位置。

将它们更改为position:absolute 或position:relative;

#gc {
     position: absolute; top: 10px; right: 20px; /*consider using normal flow instead*/
}
#ib {
     position: absolute; top: 10px; left: 70px; /*consider using normal flow instead*/
}
 #fc {
     position: absolute; top: 350px; right: 1040px; /*consider using normal flow instead*/
}

您还应该考虑使用 position:relative 而不是 position:absolute 因为它只是将您的元素绝对定位在您定义的位置(例如 left:70px;)并且它无论如何都会留在那个位置(改变你的浏览器宽度不会改变它)。您应该避免使用绝对位置，并尝试使用边距和填充来定位您的元素。

关于定位的一些教程:

https://alistapart.com/article/css-positioning-101

http://webdesign.about.com/od/beginningcss/p/aacss9layout.htm

使用此链接可以更好地理解边距和填充:

https://www.w3schools.com/css/css_boxmodel.asp