圣杯布局中必须为左右栏添加 position: relative 才能通过负 margin 准确定位；否则浮动元素会脱离预期布局流，导致遮盖或换行。
圣杯布局里用 position: relative 配合负 margin 并不是“微调定位”的可选技巧，而是修复视觉错位的必要步骤——漏掉它，左右栏大概率会遮盖中间内容或掉到下一行。
为什么必须加 position: relative 才能用负 margin 拉回左右栏
浮动元素（float: left/float: right）本身脱离文档流，但它的定位参考系仍是正常流中的位置。当你给左栏设 margin-left: -100%，它确实会往左拉，但拉完后若没触发新的包含块，浏览器仍按原始浮动起点计算后续布局，导致右栏被挤下去、中间栏文字被遮盖。
position: relative 的作用是：不改变元素在文档流中的占位，但为它创建一个独立的定位上下文。这样，后续的 left/right 偏移（哪怕只是临时用）或父容器的 padding 预留空间，才能准确锚定到你期望的位置。
- 不加
position: relative：负 margin 只是“移动渲染盒”，不影响布局流，容易和父容器 padding 冲突 - 加了之后：元素获得自己的坐标系，
left: -200px或right: -300px才真正可控 - 特别注意：IE8 及更早版本中，
position: relative必须配合显式top/left才生效，只写position: relative不够
margin-left: -100% 和 margin-left: -200px 不能混用
这是最容易写错的组合。圣杯布局中，左栏用 margin-left: -100% 是为了从行首“回拉一整行宽度”，而右栏必须用具体像素值（如 margin-left: -200px），否则它会按父容器宽度的百分比偏移，完全失准。
- 左栏：结构上在中间栏之前（HTML 中写在
main后面），所以用margin-left: -100%把它拽回容器最左 - 右栏：结构上在中间栏之后，需先让它浮动到行尾，再用
margin-left: -宽度值往左拉进预留空隙 - 如果右栏也写
margin-left: -100%，它会拉到容器左侧，直接叠在左栏上 - 所有负 margin 值都必须基于
box-sizing: border-box下的净宽；若用了padding: 10px，那-200px就得改成-220px（含 padding）
父容器 padding 和子元素 position: relative 必须配对出现
圣杯布局靠父容器的 padding-left 和 padding-right 预留左右栏空间，但这只是“留白”，不等于“占位”。如果左右栏没加 position: relative，它们会无视 padding 直接贴边，甚至溢出。
- 父容器
padding-left: 200px→ 给左栏留出 200px 宽度空间 - 左栏
position: relative; left: -200px→ 真正把内容框挪进这个空间 - 缺一不可：只留 padding，左右栏会悬在空白区外；只加
position不留 padding，它们会压住中间栏 - 移动端 Safari 在 iOS 15.4 以下对这种组合有渲染延迟，建议加
will-change: transform触发 GPU 加速
真正难的不是写出这三行 CSS，而是记住：每改一个像素值，都要同步检查 box-sizing、padding、border 和 position 四者的数值关系。现代项目里，除非要兼容 IE8，否则直接用 display: flex + order 更稳——圣杯的负 margin + relative 组合，本质是一套需要手动对齐的“机械校准系统”，容错率极低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
