潜水者在不该移动的时候移动



我正在为我参与的一个项目制作一个网站,我不明白为什么我的一些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"徽标"、"undersitel"one_answers"bakgrund"都会随着页面移动,而"navbar"则会保持在同一位置,这是为什么?

由于使用right:15%设置position:absolute,它将随着屏幕宽度进行调整,其他div没有right属性

阅读更多信息

https://www.w3schools.com/cssref/pr_class_position.asp

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

最新更新