box-sizing 不影响 position 定位的计算基准（top/left 始终基于 content box），但影响元素实际尺寸和布局表现，进而间接导致偏移后被裁剪或挤压邻居。
当元素设置了 position: absolute 或 position: relative，它的偏移量（top/left 等）始终基于 content box 的边界，但实际占据空间和尺寸表现会受 box-sizing 直接影响。
默认 box-sizing: content-box 时，width: 200px + padding: 20px + border: 5px 会让元素总宽变成 250px；而 box-sizing: border-box 下，这 200px 已包含 padding 和 border —— 这直接影响 left 偏移后，其右侧是否意外挤压邻居，或被父容器 overflow 裁剪。
overflow: hidden，子元素 position: absolute + right: -10px，若子元素用 content-box 且 padding 较大，可能实际右边缘比预期更靠右，导致被裁剪transform: translate(-50%, -50%) 配合 left: 50%; top: 50%，box-sizing 不影响定位逻辑，但会影响弹窗自身宽高是否“撑开”遮罩层top/left 是从哪条线开始算的position: absolute 的定位基准不是最近的 position: relative 父元素，而是它的 containing block —— 即第一个满足「非 static 定位」的祖先元素，且该祖先的 transform、perspective、filter 等属性也会影响 containing block 的生成。
常见误判点：
position: relative，但没设 width/height，且内部无内容撑开，它可能高度为 0 —— 此时 absolute 子元素的 top: 0 会相对于 body 计算（因父级 containing block 实际退化）transform: translateY(10px)，即使它 position: static，也会成为 containing block，导致子元素 top: 0 相对于这个 transform 后的框定位position: relative 并确保它有明确尺寸（或至少 min-height: 1px）
不生效。position: absolute 或 position: fixed 的元素已脱离常规文档流，其 margin 不再参与 margin collapse；position: relative 元素仍处于文档流中，所以它和兄弟元素之间的 margin collapse 照常发生。
这意味着：
position: absolute 元素即使上下相邻、都设 margin-bottom: 20px，它们之间距离就是各自 margin 的简单相加（40px），不会合并成 20pxposition: relative 的标题 + 一个 position: static 的段落，若标题有 margin-bottom: 30px、段落有 margin-top: 20px，实际间距仍是 30px（collapse 后）padding 替代 margin，或触发 BFC（如加 overflow: hidden）z-index 只对定位元素（position 值不为 static）有效，但它是否真正起作用，取决于 stacking context。常见失效不是写错了值，而是 stacking context 被意外创建。
排查顺序：
opacity 、transform、filter、will-change 等属性？这些会创建新的 stacking context，导致子元素的 z-index 只在该 context 内部比较
z-index: 1000）被包裹在 opacity: 0.95 的卡片里，而卡片父容器 z-index: 10，那弹窗再高也盖不过同级的 z-index: 50 按钮z-index: auto 和 z-index: 0？前者不创建 stacking context，后者会 —— 有时加个 z-index: 0 反而让元素被压在底层复杂点在于：stacking context 可以嵌套，且每个 context 内部有自己的 z-index 层级。一旦父级 context 的整体层级低于另一个 context，里面所有子元素再高的 z-index 也无济于事。