如何防止调整图片尺寸时文本与图片互相位移？

你的问题核心在于结构嵌套和定位逻辑混乱：.image2嵌套在.wrd-box内部，且两者都用了relative定位，图片放大时会挤压父容器空间，直接带动标题移动；你尝试的fixed定位失效，是因为父元素的relative定位会限制fixed的作用范围（此时fixed会相对于父元素而非视口定位）。

以下是具体的修复方案：

第一步：调整HTML结构 #

把.image2从.wrd-box中移出，让两者成为同级元素，彻底隔离布局影响：

<section class="header">
  <nav>
    <div class="image1">
      <a href="club.html"><img src="https://via.placeholder.com/200.jpg"></a>
      <div class="nav-links">
        <ul>
          <li><a href="">HOME</a></li>
          <li><a href="">ABOUT US</a></li>
          <li><a href="">CONTACT US</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 标题容器 -->
  <div class="wrd-box">
    <h1>WELCOME TO THE OFFICIAL VCU GYM CLUB HOMEPAGE</h1>
  </div>
  <!-- 独立的图片容器 -->
  <div class="image2">
    <a href="club.html"><img src="https://via.placeholder.com/200/FF0000" alt="gym picture"></a>
  </div>
</section>

第二步：重构CSS布局 #

用Flex布局实现页面居中，替代原来依赖position: relative+transform的复杂写法，同时去掉冗余的硬编码定位值：

/* 给整个header设置垂直布局，内部元素自动居中 */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 80px); /* 预留导航栏高度，避免遮挡 */
  padding-top: 20px;
  box-sizing: border-box;
}

.wrd-box {
  width: 90%;
  color: #FFD700;
  text-align: center;
  /* 去掉原来的relative/transform，靠父元素Flex实现居中 */
}

.trademark {
  width: 100%;
  margin: auto;
  text-align: center;
  padding-top: 1px;
  color: gray;
}

.image2 img {
  width: 300px;
  height: 300px;
  /* 可选：添加hover放大动画，完全不影响标题 */
  transition: transform 0.3s ease;
}

.image2 img:hover {
  transform: scale(1.1);
}

/* 补全导航栏样式，避免布局错乱 */
nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
}

.nav-links ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
}

修复逻辑说明 #

1. 结构分离：图片和标题分属不同容器，图片的尺寸变化只会影响自身，不会干扰标题布局。
2. Flex布局：相比传统定位，Flex能自适应不同屏幕尺寸，无需硬编码top/bottom这类容易出错的数值。
3. 定位清理：去掉冗余的relative定位，避免元素间的布局干扰，同时让fixed定位（如果后续需要）能正常相对于视口生效。

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