绝对定位的top/left起点是包含块border-box左上角；父元素需设position:relative等才能成为包含块；若含overflow:hidden和border则触发bfc裁剪。
absolute定位的top/left起点是border-box左上角
绝对定位元素的top和left永远从包含块（containing block）的border-box左上角（即border外边缘）开始计算，不是padding内侧，也不是content区域。哪怕父元素设置了padding: 20px，top: 0; left: 0依然会让子元素紧贴父元素border顶边和左边——视觉上就像“被padding推开”了，其实只是你误以为定位起点在padding内。
这个行为与box-sizing完全无关：box-sizing: border-box只影响父元素自身宽高的计算方式，不改变定位原点。
- 常见错误现象：
.parent { padding: 20px; position: relative; }+.child { position: absolute; top: 0; left: 0; }→ 子元素离父元素内容区顶部有20px+border宽度的空隙 - 规范依据：CSS 2.2 明确规定，对于块级包含块，绝对定位的偏移基准是“padding edge”，但注意——这里的“padding edge”是指包含块自身的padding box边界，而该padding box的起点仍是border外缘
- 验证方法：打开Chrome DevTools，选中绝对定位元素，在Computed面板看
offsetTop/offsetLeft值，它反映的就是相对于包含块border-box左上角的真实像素距离
父元素没设position:relative就根本不是包含块
如果父元素是position: static（默认值），它压根不会成为绝对定位子元素的包含块。子元素会一路向上查找，直到遇到position: relative、absolute、fixed或sticky的祖先；找不到就落到视口（initial containing block）。
所以你以为“忽略padding”，实际可能是“根本没认这个父元素当爹”——top: 0其实是相对于或视口顶部算的。
- 必须显式给父元素加
position: relative（哪怕不改布局），才能确立包含块关系 -
position: relative本身不改变元素在文档流中的位置，只让它具备“当爹资格” - 中间某层用了
position: fixed，那它就是包含块——哪怕DOM结构上离得很远
想对齐padding内侧？只能手动偏移或结构分离
没有CSS属性能一键把定位原点从border外缘“切换”到padding内侧。你要么接受原点不变、靠数值补偿，要么重构DOM让定位上下文更干净。
- 手动偏移：父元素
padding: 20px 16px 12px 8px→ 子元素写top: 20px; right: 16px; bottom: 12px; left: 8px（注意方向对应） - 结构分离（推荐）：
<div class="pos-wrapper"><div class="pad-border-container">…</div></div>，其中.pos-wrapper只设position: relative且无padding/border，.pad-border-container负责视觉留白 - 别用
transform: translate()替代偏移来“模拟对齐”——它不改变定位原点，只做视觉位移，可能引发z-index、事件捕获等隐性问题
overflow:hidden + border触发BFC裁剪才是真“消失”
如果你发现absolute元素“被父元素砍掉一半”，大概率不是padding的问题，而是父元素同时满足：border + overflow: hidden（或auto/scroll）。这时父元素会触发BFC，强制裁剪所有溢出内容——包括本该脱离文档流的absolute子元素。
- border单独存在不会裁剪；overflow:hidden单独存在也不会裁剪非块级内容；但两者叠加就会
- 检查父元素Computed面板里的
display是否变成block (BFC) - 修复优先级：移除
overflow> 把absolute元素移出该父级DOM > 改用position: fixed并手动同步滚动位置
最易被忽略的一点：绝对定位的参考系是“最近已定位祖先的border-box”，但这个祖先本身是否被裁剪、是否创建新层叠上下文、是否带transform，都会间接改变你看到的结果——定位原点没变，但渲染结果变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
