Divs moving around when they should not?

Question

I'm making a website for a project I'm involved in and I can't figure out why some of my divs are moving around when resizing the page while others aren't. I'm fairly new to both HTML and CSS so it might be something very basic but I can't figure out what it is. I think I've given all of my divs proper sizing, this is my code.

CODE

 .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>

When I open the HTML-document and resize the browser window both the div 'logo', 'undertitel' and 'bakgrund' moves with the page, while 'navbar' kind of stays in the same place, why is that?

Answer 1

becouse u set position:absolute with right:15% it will adjust with screen width other div do not have right property

read for more info

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/