HTML/CSS元素缩放位移问题求助：缩放时元素位置偏移

架构老林

2026-8-10

解决缩放时元素移位的问题

问题根源

你的代码里存在几个导致缩放错位的核心问题：

混合使用固定单位（px）和相对单位，比如统计文本用font-size:12px，但标题用vw，缩放时两者比例不一致
统计条内部元素依赖硬编码的left百分比（比如left:750%），这种定位完全依赖父元素宽度，缩放时父元素尺寸变化会直接导致偏移
大量用position:relative+百分比top/left布局，没有用更可靠的弹性布局来控制元素位置

修复方案

下面是针对性的修改，核心是用Flexbox替代混乱的定位，统一使用相对单位保证缩放一致性：

1. 统一字体单位

把所有固定px的字体换成vw，保证和标题字体缩放同步。

2. 用Flexbox重构统计条布局

抛弃复杂的position+硬编码偏移，用Flexbox实现统计数字和标签的对齐，同时保证进度条的正确显示。

3. 优化导航栏间距

把导航项的固定px margin改成相对单位，避免缩放时间距不变导致排版错乱。

4. 重构info-box内部布局

用Flexbox垂直排列info-box里的内容，替代百分比top定位，避免元素堆叠错位。

修改后的完整代码

HTML（调整类名，统一样式结构）

<body>
  <header>
    <div class="banner">
      <div id="nav-container">
        <nav id="navbar">
          <ul>
            <li><a href="#">Start</a></li>
            <li><a href="#">Graf</a></li>
            <li><a href="#">Midtseksjon</a></li>
            <li><a href="#">Bunnseksjon</a></li>
          </ul>
        </nav>
        <img id="header" src="/images/wildfire-header.jpeg" />
      </div>

      <div id="info-box">
        <div id="white-line"></div>
        <span id="statistics"><b>Statistikk for Black Summer</b></span>

        <div class="statistic-item">
          <div class="statistic-bar" style="width:10%">
            <span class="statistic-amount">26</span>
            <span class="statistic-type">Dødsfall</span>
          </div>
        </div>

        <div class="statistic-item">
          <div class="statistic-bar" style="width:100%">
            <span class="statistic-amount">3 Milliard</span>
            <span class="statistic-type">Dyr død/blitt fordrevet</span>
          </div>
        </div>

        <div class="statistic-item">
          <div class="statistic-bar" style="width:45%">
            <span class="statistic-amount">2448</span>
            <span class="statistic-type">Hus brent</span>
          </div>
        </div>

        <div class="statistic-item">
          <div class="statistic-bar" style="width:90%">
            <span class="statistic-amount">5.5 Million</span>
            <span class="statistic-type">Hektar brent</span>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

.banner, #header {
  height: 50vh;
  width: 100%;
}

#nav-container {
  position: relative;
  width: 80%;
}

#navbar {
  position: absolute;
  z-index: 2;
  left: 67%;
}

#navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 1.5vw; /* 改用相对单位 */
}

#info-box {
  height: 30%;
  width: 20%;
  position: absolute;
  top: 20%;
  left: 60%;
  background-color: rgba(0, 0, 0, 0.65);
  display: flex; /* Flex垂直排列内部元素 */
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 1% 0;
  box-sizing: border-box;
}

#white-line {
  background-color: white;
  height: 1%;
  width: 80%;
}

#statistics {
  color: white;
  font-size: 1.35vw;
  text-align: center;
}

/* 统一统计项样式 */
.statistic-item {
  width: 70%;
  height: 2vh;
  background-color: #322d31;
  overflow: hidden;
}

.statistic-bar {
  height: 100%;
  background-color: orangered;
  display: flex; /* Flex布局内容 */
  align-items: center;
  justify-content: space-between; /* 数字左对齐，标签右对齐 */
  padding: 0 2%;
  box-sizing: border-box;
}

.statistic-amount, .statistic-type {
  color: white;
  font-family: sans-serif;
  font-size: 0.8vw; /* 相对单位字体，保证缩放同步 */
}

关键修改说明

Flexbox布局：info-box和统计条都用Flex，彻底抛弃复杂的position定位，元素位置由布局系统自动控制，缩放时不会错位
相对单位统一：字体、间距都用vw，保证所有元素缩放比例一致
移除硬编码偏移：删掉了left:750%这类极端百分比定位，改用Flex的space-between实现内容对齐
简化结构：给统计项统一类名，减少重复CSS代码，同时提升可维护性

内容的提问来源于stack exchange，提问作者JadedFiend