如何在HTML/CSS的图片轨道上正确定位文本？

核心问题是当前文本直接放在flex布局的#image-track中，没有与对应图片绑定到独立容器，导致定位混乱并干扰flex布局。正确的做法是用相对定位容器包裹每个图片和对应文本，让文本相对于自身图片容器定位，同时保持整个图片轨道的flex结构完整。

修改步骤： #

1. 给每个图片+文本组合添加.image-item容器，设置position: relative作为文本定位的参考
2. 统一文本样式，用通用类代替h1/h2/h3，减少重复代码
3. 调整文本的定位参数，使其相对于图片容器居中或按需摆放
4. 确保容器尺寸与图片匹配，维持原布局的间距和视差效果

修改后的代码： #

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>∘₊✧Profiles✧₊∘</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&family=Rubik&family=Space+Mono:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="image-track" data-mouse-down-at="0" data-prev-percentage="0">
    <!-- 每个图片+文本用容器包裹 -->
    <div class="image-item">
      <img class="image track1" src="https://images.unsplash.com/photo-1524781289445-ddf8f5695861?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
      <h1 class="image-text" data-value="STEAM">STEAM</h1>
    </div>

    <div class="image-item">
      <img class="image track2" src="https://images.unsplash.com/photo-1610194352361-4c81a6a8967e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80" draggable="false" />
      <h2 class="image-text" data-value="DISCORD">DISCORD</h2>
    </div>

    <div class="image-item">
      <img class="image track3" src="https://images.unsplash.com/photo-1618202133208-2907bebba9e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
      <h3 class="image-text" data-value="WARFRAME">WARFRAME</h3>
    </div>

    <!-- 其余无文本的图片也用容器包裹，保持布局一致性 -->
    <div class="image-item">
      <img class="image track4" src="https://images.unsplash.com/photo-1495805442109-bf1cf975750b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
    </div>

    <div class="image-item">
      <img class="image track5" src="https://images.unsplash.com/photo-1548021682-1720ed403a5b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
    </div>

    <div class="image-item">
      <img class="image track6" src="https://images.unsplash.com/photo-1496753480864-3e588e0269b3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2134&q=80" draggable="false" />
    </div>

    <div class="image-item">
      <img class="image track7" src="https://images.unsplash.com/photo-1613346945084-35cccc812dd5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1759&q=80" draggable="false" />
    </div>

    <div class="image-item">
      <img class="image track8" src="https://images.unsplash.com/photo-1516681100942-77d8e7f9dd97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" draggable="false" />
    </div>
  </div>

  <script src='const script = document.createElement("script"); script.src = "https://kit.fontawesome.com/1ee8f271b9.js"; document.body.appendChild(script);'></script>
  <script src="./script.js"></script>
</body>

</html>

CSS：

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: rgb(20, 20, 20);
  margin: 0rem;
  overflow: hidden;
}

/* 图片容器：作为flex项，同时提供文本定位参考 */
.image-item {
  position: relative;
  width: 40vmin;
  height: 56vmin;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% center;
}

/* 统一文本样式，无需单独设置h1/h2/h3 */
.image-text {
  position: absolute;
  font-size: clamp(1vw, 3vw, 10vw);
  font-family: 'Space Mono', monospace;
  font-weight: bold;
  color: white;
  padding: 0rem clamp(1rem, 2vw, 3rem);
  border-radius: clamp(0.4rem, 0.75vw, 1rem);
  /* 居中定位，可按需调整top/left */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.image-text:hover {
  background-color: white;
  color: black;
}

#image-track {
  display: flex;
  gap: 2.5vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(0%, -50%);
  user-select: none;
}

关键说明： #

• .image-item作为flex布局的直接子项，确保整个图片轨道的布局结构不受影响
• 文本的position: absolute相对于.image-item（相对定位），不会干扰其他元素
• 统一文本样式减少冗余，同时保持hover效果
• 无文本的图片也用.image-item包裹，保证所有flex项尺寸一致，布局对齐

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