当我调整窗口大小时，所有元素都会改变大小和位置

Question

我是 CSS 和 html 的新手，现在我得到了这个学校项目，我在其中制作了一个虚构的商业网站。当我调整窗口大小时，问题已经出现在首页上；我的所有元素都改变了位置和大小..我该怎么办？ 我已经询问了聊天 GPT 并尝试在线浏览答案。聊天 GPT 告诉我使用一个单位，例如 % 或 px，但我不认为这是问题所在 (?)

第一次发帖，希望大家能帮忙解答一下。谢谢 这是我的 CSS：

* {
  padding: 0;
  margin: 0;
  }


.navigationBar{
height: 100%;
width: 100%;
}

nav{
display: flex;
align-items: center;
justify-content: space-between;
}

.navBox {
position: fixed;
left: 17%;
top: 1%;
border: 10px;
border-style: double;
border-radius: 50px;
padding: 5px;
border-color: #edc967;
box-shadow: 0 5px 10px #edc967, inset 0 0 20px #edc967, 0 0 20px #ef1c1c, inset 0 0 10px #ef1c1c, 0 0 5px black, inset 0 0 20px white;
opacity: 1;
font-size: 19px;
cursor: default;
}

h2 {
position: fixed;
top: 1%;
left: 1%;
border: 10px;
padding: 5px;
border-style: double;
border-radius: 50px;
background-color: rgba(245, 245, 245, 0.433);
font-size: 30px;
cursor: default;
opacity: 1;
color: rgba(255, 34, 0, 0.885);
box-shadow: inset 0 0 10px #b84444, 0 0 20px rgba(255, 34, 0, 0.885), inset 0 0 10px rgba(255, 34, 0, 0.885), 0 0 10px #edc967, inset 0 0 6px #edc967;
}

.elope {
color: #212121;
text-shadow: 0 0 10px white;
font-family: "brush script MT", cursive;
}

nav ul li {
list-style-type: none;
display: inline-block;
padding: 4px 40px;
font-size: 20px;
font-weight: bold;
}

nav ul li a {
color: black;
text-shadow: 2px 1px 5px white;
text-decoration: none;
font-family: sans-serif;
font-weight: bolder;
display: flex;
align-items: center;
justify-content: center;
transition-timing-function: ease-in-out;
transition: 1s;
}
nav ul li a:hover {
color: rgb(255, 252, 252);
text-shadow: 1px 2px 3px red, 1px 1px 5px #edc967;
}

\#pictureHomePage {
overflow: hidden;
border-bottom: 10px ridge #f9f295;
width: 100vw;
height: 79vh;
position: absolute;
background-size: cover;
}

img {
width: 100%;
height: 100%;
}

\#frontpageBox {
box-sizing: border-box;
height: 33%;
width: 26%;
background-color: #ff89bab5;
border: outset;
border-color: #d0176177;
border-width: 4px;
border-radius: 5%;
position: absolute;
top: 55%;
left: 5%;

}

h4 {
box-sizing: border-box;
height: inherit;
font-size: 4vw;
letter-spacing: 1vw;
line-height: 1.3;
padding-left: 1vw;
text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #dfbd69, 0 0 42px #dfbd69, 0 0 102px #926f34, 10px 10px 160px #926f34, 1px 1px 10px rgb(224, 7, 7), 2px 2px 5px black, -5px -5px 10px red;
color: rgb(255, 255, 255);
font-family:'Courier New', Courier, monospace;
cursor: default;
}

/\* ----------------------------------------------------------------------- \*/

#bottomPage {
overflow: hidden;
width: 100vw;
height: 90vh;
background-color: peachpuff;
position: relative;
top: 605px;
}

.bottomText {
overflow: hidden;
background-color: rgb(253, 204, 161);
padding-left: 15px;
padding-top: 15px;
border: 10px double;
border-color: #ff559d;
box-shadow: inset 1px 5px 20px crimson, inset 5px 1px 50px #926f34, inset 5px 5px 70px white, 0 0 10px white, 0 0 20px skyblue, 0 0 20px yellow;
height: 250px;
width: 600px;
position: absolute;
top: 13%;
left: 10%;
cursor: default;
}

.homepageText {
color: black;
font-size: 25px;
font-family: sans-serif;
line-height: 1.3;
text-shadow: 0px 0px 5px #a67d01, 1px 1px 2px #a9aaae, 1px 1px 5px white, 1px 1px 2px red;
}

\#imageBox {
display: flex;
flex-direction: row;
justify-content: space-evenly;
position: relative;
top: 62%;
}

.linkImage {
position: relative;
width: 15%;
border: 4px solid rgb(0, 0, 0);
border-radius: 7px;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
opacity: .7;
}

.linkImage:hover {
box-shadow: 0 0 20px red, 0 0 20px #faf398, 0 0 40px #926f34, 0 0 30px white, 0 0 70px pink;
width: 16vw;
opacity: .9;
}

.clickableText {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
color: black;
font-size: 40px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
text-decoration: none;
text-shadow: 0 0 5px #926f34, 0 0 3px white, 0 0 9px #ef1c1c;
opacity: 0;
transition-property: all;
transition-duration: .3s;
transition-timing-function: ease-in-out;
}

.clickableText:hover {
opacity: 1;
letter-spacing: 5px;
}