position: absolute 元素 width/height 失效是因脱离文档流后不继承父宽高，需显式设置 width、同时设 left/right 或用 inset + width: auto；fixed 元素不受父 overflow 裁剪；transform 缩放会偏移视觉位置，需调整 transform-origin 或弃用 scale。

position: absolute 时 width/height 失效的常见原因

元素设为 position: absolute 后，若未显式设置 width 或 height，其尺寸会退化为“内容撑开”，而非父容器的剩余空间。这不是 bug，而是 CSS 规范行为：绝对定位元素脱离文档流，不再继承父块级容器的 width（除非父元素有明确 width 且子元素设了 left/right 等偏移）。

要让 width 生效，必须满足至少一个条件：

• 显式声明 width 值（如 width: 200px 或 width: 50%）
• 同时设置 left 和 right（此时 width 由两者与 margin 共同决定）
• 设置 inset（现代写法，等价于 top/right/bottom/left）并配合 width: auto

用 inset + width: auto 实现响应式尺寸控制

inset 是 top/right/bottom/left 的简写，配合 width: auto 可以让元素自动填充指定边距之间的空间，比手动算 calc() 更可靠。

例如，想让弹窗在视口内留白 20px 并水平居中：

dialog {
  position: absolute;
  inset: 20px auto auto 20px; /* top=20, right=auto, bottom=auto, left=20 */
  width: calc(100vw - 40px); /* 需手动计算宽度 */
}

但更简洁的做法是直接用 inset 四值 + width: auto：

dialog {
  position: absolute;
  inset: 20px; /* top/right/bottom/left = 20px */
  width: auto; /* 此时 width 由 left+right+border+padding 决定 */
  max-width: 600px;
  margin: 0 auto; /* 水平居中仍需 margin，因为 width 不是 100% */
}

注意：margin: auto 在绝对定位中仅在 left 和 right 均为 auto 时才触发居中逻辑。

position: fixed 元素无法被父容器 overflow 裁剪

这是尺寸控制中最容易被忽略的兼容性陷阱：无论父元素是否设置了 overflow: hidden，position: fixed 元素始终相对于视口定位，完全脱离所有祖先的裁剪上下文。

如果你希望一个“固定定位”的提示框被某个滚动区域限制显示范围，必须改用 position: absolute，并确保其最近的非 static 定位祖先（即 relative/absolute/fixed）就是那个滚动容器：

• 给滚动容器加 position: relative
• 子元素用 position: absolute 并通过 top/left 定位
• 此时 overflow: hidden 才会对该子元素生效

错误示例：position: fixed + parent { overflow: hidden } → 提示框依然完整显示，超出部分不被隐藏。

transform 缩放会影响 position 偏移的视觉位置

当对 position: absolute 元素使用 transform: scale() 时，元素的几何尺寸（包括 offsetWidth、布局占位）不变，但视觉渲染尺寸改变——这会导致你基于原始尺寸写的 top/left 偏移看起来“不准”。

比如一个宽高 100px 的按钮，设 top: 50px; left: 50px; transform: scale(1.5)，它实际视觉顶部离参考点约 50px − (100×0.5/2) = 25px（因缩放中心默认是 center，上移了自身扩增部分的一半）。

解决办法只有两个：

• 改用 transform-origin: 0 0，让缩放从左上角开始，此时 top/left 保持视觉对齐
• 或放弃 transform，改用 width/height 配合 font-size 等重设尺寸（性能略差，但行为可预测）

没有“既用 scale 又想让 top/left 表现得像未缩放”的偷懒方案；浏览器不会自动补偿 transform 引起的视觉偏移。