如何在css / html中放置与窗口浏览器相关的对象？

Question

如何在css中放置一个对象以根据窗口浏览器的大小移动？

我尝试了以下类型的定位：固定，绝对和相对。我遇到的问题是，当我改变窗口浏览器的大小时，它会保持在同一个位置，并且不随浏览器大小移动。

提前感谢您的帮助！

Answer 1

您必须使用px定义顶部，底部，左侧，右侧，因此您需要使用%

Demo

<div class="hello">
  Whatever
<div>

.hello {
   position: absolute;
   top: 50%;
   left: 50%;
}

确保您使用absolute位置，而不是将其包裹在相对定位的容器内，以便它不会在野外流出

Answer 2

如果没有任何信息，我会假设您使用像素作为上下左侧？您可能想要尝试的是：

.my-class {
  position: absolute;
  top: 20%;
  left: 20%;
}

您还可以使用@media queries in css

根据具体尺寸进行排名