如何在HTML/CSS中实现文本固定相对定位并适配浏览器缩放？

要实现"Sample"居左，"bla1""bla2"居右且缩放时相对位置不变，Flexbox是最可靠的方案，完全不需要JavaScript，而且能完美适配各种缩放比例。下面是修改后的代码和详细说明：

修改后的HTML代码 #

<div id="tophead">
  <a href="index.html">
    <h1 class="webHeader">Sample</h1>
    <div class="right-group">
      <h1 class="webHeader2">bla1</h1>
      <h1 class="webHeader3">bla2</h1>
    </div>
  </a>
</div>

修改后的CSS代码 #

#tophead {
  margin: 0;
  padding: 0 1rem; /* 加左右内边距避免贴边 */
  border: 2px solid black;
  position: absolute;
  left: 40%;
  transform: translateX(-40%); /* 让容器真正水平居中，原left:40%只是左边缘在40%位置 */
  font-family: Arial;
  color: #00284d;
}

#tophead a {
  display: flex; /* 把a标签变成flex容器，实现左右布局 */
  align-items: center; /* 垂直居中所有元素 */
  justify-content: space-between; /* 左右元素自动拉开距离 */
  text-decoration: none;
  color: inherit;
  padding: 0.5rem 0; /* 增加上下内边距，让布局更宽松 */
  min-width: 300px; /* 可选：设置最小宽度，避免缩放过小时元素挤在一起 */
}

.right-group {
  display: flex;
  flex-direction: column; /* 让bla1和bla2垂直排列 */
  align-items: flex-end; /* 右侧文本右对齐 */
}

#tophead h1 {
  margin: 0.2rem 0; /* 调整h1的margin，避免重叠 */
}

.webHeader {
  font-size: 180%;
}

.webHeader2 {
  font-size: 100%;
}

.webHeader3 {
  font-size: 90%;
}

关键修改点说明 #

• Flex容器设置：把<a>标签设为display:flex，用justify-content:space-between自动将左侧的"Sample"和右侧的文本组分开，无论容器怎么缩放，这个相对位置都会保持。
• 右侧文本组：新增.right-group容器，用flex-direction:column让"bla1""bla2"垂直排列，同时align-items:flex-end保证它们右对齐。
• 居中优化：原代码的left:40%只是让容器左边缘在40%位置，新增transform: translateX(-40%)可以让容器整体水平居中，视觉效果更合理。
• 移除不稳定的定位：删掉了原代码中position:relative和负的top/left值，这些基于百分比的偏移在缩放时会导致元素错位，Flex布局完全不需要这些。

为什么这个方案适配缩放？ #

Flex布局的空间分配是基于容器的可用空间，所有元素的位置都是相对容器的比例或弹性空间，无论是100%还是200%缩放，元素之间的相对关系都会保持一致，不会出现错位或重叠的问题。

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