Divs 什么时候不应该走动？

问题描述

我正在为我参与的项目创建一个网站，但我不明白为什么我的某些 div 在调整页面大小时会四处移动，而另一些则没有。我对 HTML 和 CSS 都很陌生，所以它可能是非常基本的东西，但我不知道它是什么。我想我已经给了我所有的 div 适当的大小，这是我的代码。

代码

.wrapper {
  position: relative;
}

.bakgrund {
  /*background-image: url("img/bakgrund.png");*/
  background-image: url("https://dummyimage.com/1400x1400/000000/fff");
  height: 1400px;
  width: 1400px;
  position: absolute;
}

.logo {
  /*background-image: url("img/logo1.png");*/
  background-image: url("https://dummyimage.com/821x1082/d415d4/fff");
  height: 1082px;
  width: 821px;
  top: -180px;
  right: 15%;
  position: absolute;
}

.nav {
  left: 670px;
  top: 450px;
  position: absolute;
}

.undertitel {
  right: 630px;
  top: 500px;
  position: absolute;
}

<div class="wrapper">
  <div class="bakgrund"></div>
  <div class="logo"></div>
  <div class="nav">
    <a href="index.html">Hem</a>
    <a href="kluringar.html">Kluringar</a>
  </div>
  <div class="undertitel">
    <p>"Många är kallade,få är utvalda"</p>
  </div>
</div>

当我打开 HTML 文档并调整浏览器窗口大小时，div 'logo'、'undertitel' 和 'bakgrund' 都随着页面移动，而 'navbar' 则保持在同一个位置，这是为什么？

解决方法

因为你用 position:absolute 设置了 right:15% 它会随着屏幕宽度调整其他 div 没有 right 属性

https://www.freecodecamp.org/news/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd/

division html