如何在不同视口尺寸下保持文本位置固定不变？

要让元素在任意视口尺寸下保持固定位置，核心是脱离依赖视口/父元素尺寸的相对定位逻辑，改用固定参考或绝对定位规则。以下是几种实用方案：

1. 绝对定位（Absolute Positioning） #

让元素脱离文档流，相对于最近的非静态定位父元素做精准定位，用固定单位（px、rem等）设置位置，完全不受视口缩放影响。

/* 父元素设为相对定位，作为定位参考容器 */
.position-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* 清除默认边距避免干扰 */
  margin: 0;
  padding: 0;
}

/* 目标元素绝对定位 */
.fixed-text {
  position: absolute;
  top: 60px;    /* 固定距离容器顶部60px */
  left: 120px;  /* 固定距离容器左侧120px */
  margin: 0;    /* 清除默认margin防止偏移 */
}

如果没有合适的父容器，直接基于<body>定位也可，前提是清除<body>和<html>的默认边距：

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

.fixed-text {
  position: absolute;
  top: 40px;
  right: 50px;
}

2. 固定定位（Fixed Positioning） #

元素相对于浏览器视口定位，即使页面滚动也不会移动，适合需要始终固定在屏幕某个角落的元素。

.fixed-text {
  position: fixed;
  bottom: 30px;  /* 固定距离视口底部30px */
  left: 30px;    /* 固定距离视口左侧30px */
  padding: 0;    /* 避免padding额外占用空间导致位置偏差 */
}

3. 替换百分比单位为固定单位 #

你之前用百分比padding导致偏移，本质是因为百分比内边距是基于父元素宽度计算的——视口变化时父元素宽度改变，padding值也会跟着变。换成px、rem这类固定单位就能彻底解决：

/* 错误写法：百分比padding随父元素宽度变化 */
/* .text { padding-top: 10%; } */

/* 正确写法：固定单位保证位置稳定 */
.fixed-text {
  padding-top: 50px;
  margin-left: 80px;
}

4. Grid/Flex配合固定尺寸容器 #

如果需要在布局框架内固定元素位置，可以用Grid定义固定轨道尺寸，或Flex容器设置固定宽高，把元素锁定在指定区域：

Grid示例： #

.layout-container {
  display: grid;
  /* 第一列固定200px，第二列自适应；第一行固定150px，第二行自适应 */
  grid-template-columns: 200px 1fr;
  grid-template-rows: 150px 1fr;
  width: 100vw;
  height: 100vh;
}

.fixed-text {
  /* 锁定在第一列第一行 */
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin: 0;
}

额外提示：兼顾响应式需求 #

如果需要在特定屏幕尺寸下调整固定位置，用媒体查询设置不同的固定值即可：

@media (max-width: 768px) {
  .fixed-text {
    top: 30px;
    left: 40px;
  }
}

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