Question

当我在页面上放置一些图像时，我会在尝试时在屏幕上移动并在我的浏览器上调整窗口的大小。我在css中讨论的图像编码为.ex { position: absolute; top: 200px; right 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），这会导致元素位置保持在浏览器视点的相同位置。

将其更改为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

Answer 2

一个jsfiddle例子会更好。绝对定位是相对于父母的图像。这些图像的父级会发生变化，因此图像会移动。您可以做的是确定具有相对位置的父级的宽度。如果父级不移动，则图像将不会移动。

如果添加jsfiddle或plunker示例，则很容易修复。

图像不会停留在原位，拖动调整窗口

2 个答案: