box-sizing 不影响 position 定位的计算基准（top/left 始终基于 content box），但影响元素实际尺寸和布局表现，进而间接导致偏移后被裁剪或挤压邻居。
box-sizing 怎么影响 position 定位的计算基准
当元素设置了 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不影响定位逻辑，但会影响弹窗自身宽高是否“撑开”遮罩层 - 调试技巧：在 DevTools 中勾选 “Show box model” 可直观看到 content/padding/border margin 四层，确认
top/left是从哪条线开始算的
position: absolute 元素的 containing block 由谁决定
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）
margin collapse 在 position 场景下还生效吗
不生效。position: absolute 或 position: fixed 的元素已脱离常规文档流，其 margin 不再参与 margin collapse；position: relative 元素仍处于文档流中，所以它和兄弟元素之间的 margin collapse 照常发生。
这意味着：
- 两个
position: absolute元素即使上下相邻、都设margin-bottom: 20px，它们之间距离就是各自 margin 的简单相加（40px），不会合并成 20px - 一个
position: relative的标题 + 一个position: static的段落，若标题有margin-bottom: 30px、段落有margin-top: 20px，实际间距仍是 30px（collapse 后） - 想让 relative 元素也绕过 collapse？可改用
padding替代margin，或触发 BFC（如加overflow: hidden）
z-index 失效时，先检查这三件事
z-index 只对定位元素（position 值不为 static）有效，但它是否真正起作用，取决于 stacking context。常见失效不是写错了值，而是 stacking context 被意外创建。
排查顺序：
- 目标元素父容器是否有
opacity 、<code>transform、filter、will-change等属性？这些会创建新的 stacking context，导致子元素的z-index只在该 context 内部比较 - 目标元素和参照元素是否属于同一个 stacking 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 也无济于事。
