定位在 CSS，当缩放网页时文本和背景移动

Question

当最小化和缩放到不同位置时，一些文本和背景会移动到不同的位置，从而使文本移出屏幕或移到其他文本或链接之上。

body,
html {
  margin: 0;
  padding: 0;
}

.gamepage {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-size: 100%;
}


/* tabbar */

.header {
  position: sticky;
  top: 0px;
  left: 0px;
  height: 10vh;
  width: 100%;
  background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
  background-size: cover;
  z-index: 2;
}

#home {
  position: absolute;
  top: 0px;
  left: 0px;
  border-style: groove;
}

#how2play {
  position: absolute;
  top: 0px;
  left: 47px;
  border-style: groove;
}

#character {
  position: absolute;
  top: 0px;
  left: 137px;
  border-style: groove;
}


/* link format */

a:link,
a:visited {
  color: white;
  text-decoration: none;
  font-weight: bold;
}


/* background */

.background {
  positon: absolute;
  background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
  height: 100%;
  width: 100%;
  top: 72px;
  left: 8px;
  background-size: cover;
  z-index: 1;
}

#title {
  color: white;
  position: absolute;
  top: 90px;
  left: 5px;
  font-size: 35px;
  font-family: Courier New;
}

#text {
  color: white;
  position: absolute;
  top: 125px;
  left: 25px;
}

#playbutton {
  color: black;
  position: absolute;
  top: 360px;
  left: 660px;
  font-size: 55px;
  font-weight: bold;
  transform: rotate(-7deg);
  border: 5px;
  border-style: double;
}

<body>
  <div class="gamepage">
    <div class="header">
      <div id="home">
        <a href="index.html">Home</a>
      </div>
      <div id="how2play">
        <a href="how2play.html">How to Play</a>
      </div>
      <div id="character">
        <a href="characterlist.html">Character List</a>
      </div>
    </div>
    <div class="background">
      <div id="title">Murder Mystery</div>
      <div id="text">Find the murderer, before it's too late...</div>
      <a href="homepage/thegame1.html">
        <div id="playbutton">Play Now</div>
      </a>
    </div>
  </div>
</body>

我试过了

将所有值更改为 %
正在使用 vh 和 vw 更改所有值。 这解决了部分问题，但不是全部
玩过绝对和相对 positioning/adding div 父标签

所有这些对我来说都是全新的，所以可能有一个我不知道的简单解决方案

Answer 1

您的 HTML 和 CSS 应该类似于下面的示例。

在这里，我已将您的 ID 换成语义 HTML 元素，并将绝对定位元素换成现代 flexbox/grid

研究用于单轴和双轴定位的 flexbox 和网格

body {
  display: grid;
  grid-template-rows: 30% 1fr;
  min-height: 100vh;
  margin: 0;
  color: white;
  background-color: black;
}

header {
  background: url("https://www.waukeepubliclibrary.org/sites/default/files/Event%20Images/Teen%20Events/MurderMystery_TopBanner-1024x265.jpg") no-repeat 50% 50%;
  background-size: cover;
}

header ul {
  display: flex;
  gap: 1rem;
  min-height: 10vh;
  list-style: none;
}

a:link,
a:visited {
  display: inline-block; /* Allows for padding and your rotation of [Play Now] */
  color: inherit;
  padding: .2em .5em;
  background: #000b;
  text-decoration: none;
  font-weight: bold;
}

main {
  background: url("https://imagevars.gulfnews.com/2021/07/05/shutterstock_1016099710-1625487358677_17a7698bad7_large.jpg") no-repeat;
  padding: 2rem;
  background-size: cover;
}

h1 {
  font-size: 2.5rem;
  font-family: Courier New;
}

.playbutton {
  color: black;
  font-size: 3.5rem;
  font-weight: bold;
  transform: rotate(-7deg);
  border: 5px;
  border-style: double;
}

<!-- Use semantic HTML instead of divs with IDs -->
<header>
  <nav>
    <ul>
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="how2play.html">How to Play</a>
      </li>
      <li>
        <a href="characterlist.html">Character List</a>
      </li>
    </ul>
  </nav>
</header>
<main>
  <h1>Murder Mystery</h1>
  <p id="text">Find the murderer, before it's too late...</p>
  <a href="homepage/thegame1.html" class="playbutton">Play Now</a>
</main>

定位在 CSS，当缩放网页时文本和背景移动

Positioning in CSS, when scaling the webpage the text & background shifts

html

css

positioning