position: absolute 的 top、left 和 width、height 均相对于最近已定位祖先元素的 padding box 计算，无则相对于视口；top/left 定位左上角，width/height 从此展开，不互相挤压。
position: absolute 时 top、left 和 width、height 是相对谁计算的
它们都相对于最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）的 padding box 计算。如果没有这样的祖先，就退回到初始包含块（通常是视口）。top 和 left 定位元素左上角，width 和 height 则从此处向右、向下扩展。
常见误解是认为 top/left 会“挤压”宽高，其实不会——它们只是挪动起点，宽高仍按自身盒模型规则渲染（受 box-sizing 影响）。
为什么设置了 top 和 left，但 width 不生效或被忽略
典型原因是元素处于 position: absolute 且**未显式设置 width**，同时其内容为空或内联内容过短，导致宽度塌陷为 auto（即内容宽度）。此时即使写了 width: 200px，也可能因父容器限制、min-width 冲突或 white-space: nowrap 等样式干扰而表现异常。
-
width为auto时，绝对定位元素默认收缩适配内容，不撑开 - 若祖先设置了
overflow: hidden且子元素left负值过大，可能被裁剪，看起来像“宽高失效” - 当同时设置
left和right，width会被覆盖（浏览器按left+right+margin推导宽度）
.box {
position: absolute;
top: 10px;
left: 20px;
width: 150px; /* 必须显式写，不能依赖 content */
height: 80px;
background: #007bff;
}
top/left 与 width/height 在不同 position 值下的行为差异
static 下 top/left 完全无效；relative 中它们偏移自身位置，但不脱离文档流，width/height 行为与普通块元素一致；fixed 时所有偏移和尺寸都相对于视口，注意滚动时元素不动，但 width 仍可设为百分比（相对于 viewport 宽度）；absolute 最常用，也是唯一能自由组合四边偏移（top/right/bottom/left）并让宽高被精确控制的场景。
立即学习“前端免费学习笔记（深入）”；
特别注意：position: sticky 的 top/left 只在滚动触发粘性行为时起作用，此时 width/height 仍由原始流内尺寸决定，不能靠它来“固定尺寸”。
用 top/left + width/height 实现居中时的常见翻车点
很多人用 top: 50%; left: 50%; width: 200px; height: 100px; 后发现右下角在中心，而不是整体居中——因为 top/left 移动的是元素左上角，不是中心点。
- 正确做法是补上负 margin：
margin-top: -50px; margin-left: -100px;（需已知宽高） - 更健壮的解法是用
transform: translate(-50%, -50%)，它不依赖具体像素值 - 如果父容器没设
position: relative，absolute子元素会相对于视口定位，导致居中失效 - 使用
%值时，top/left的百分比基于父容器高度/宽度，但width/height的百分比也如此——两者基准一致，但容易混淆“哪个 % 是谁的”
.centered {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
transform: translate(-50%, -50%);
background: #28a745;
}实际写的时候，先确认祖先是否已定位，再决定 top/left 的参照系；宽高必须显式设置，别指望 auto 配合偏移能“自动适应”；居中优先选 transform，少算负 margin。
