position: relative 是最稳妥的重叠起点，不脱离文档流，适合微调式重叠；偏移后原占位仍在，需用 margin 或 absolute 定位腾空间；单设一栏 relative，慎用百分比和负边距，注意 z-index 与可访问性。
用 position: relative 偏移一栏是最稳妥的起点
相对定位不脱离文档流，不会影响另一栏的自然排布，适合做“微调式重叠”——比如让右侧卡片微微上浮盖住左侧标题的一角。关键不是偏多少，而是偏了之后要不要留空位：top 和 left 会把元素视觉上挪走，但原来的位置仍被占着；如果想腾出空间，得配合 margin 或直接改用绝对定位。
- 只对需要重叠的那一个容器设
position: relative，别两个都加，否则互相干扰 - 偏移量建议用
px或em，避免用百分比——父容器宽度变化时，重叠关系容易失控 - 如果重叠后文字被遮挡，检查
z-index：默认值是auto，同级元素按 HTML 顺序层叠，后写的在上面
margin-left 为负值时，两栏实际占据宽度没变
负边距会让元素向左“挤入”前一个兄弟元素的空间，视觉上交错，但它的盒模型尺寸、对后续元素的影响依然按原始宽度计算。常见错误是以为设了 margin-left: -50px 就能省出 50px 给另一栏用——其实不行，父容器总宽还是两栏原始宽度之和，容易触发横向滚动或换行。
- 负边距适合固定宽布局，响应式场景下慎用，尤其搭配
flex或grid时，行为不可预测 - 若左侧栏宽 300px，想让它右边露出 20px 被右侧栏覆盖，右侧栏的
margin-left设-20px即可，不用算整栏宽度 - IE8 及更早版本对负边距支持不稳定，现在基本不用考虑，但若项目需兼容老内核，优先选
relative+z-index
绝对定位重叠要小心父容器的 position 上下文
一旦用 position: absolute，元素就脱离文档流，以最近的「已定位祖先」为参考点。如果忘了给父容器设 position: relative，它就会往上一直找，最后相对于 <body> 定位——结果就是两栏错位到屏幕角落，而不是你想要的局部交错。
- 两栏并列时，若只对其中一栏用绝对定位，另一栏仍按正常流排列，很可能被“悬空”的那一栏挡住且无法交互（除非设
pointer-events: none） -
top/right等偏移值写成0不等于“贴边”，得看父容器有没有 padding 或 border - 绝对定位元素的宽高若不显式设置，会收缩到内容大小，可能和预期视觉尺寸不符
重叠区域的点击穿透和 z-index 陷阱
看起来盖住了，不一定真“压住”了。比如右侧栏用了 position: relative 但没设 z-index，而左侧栏是普通流内元素，此时右侧栏默认 z-index: auto，层级未必更高——浏览器按渲染顺序决定谁在上，不是“后写的一定在上”。
立即学习“前端免费学习笔记（深入）”；
- 要确保可交互区域不被误遮挡，给上层栏明确设
z-index: 1，下层栏设z-index: 0（或更低），不要依赖默认值 - 如果重叠部分有按钮或链接，测试点击是否命中目标元素；必要时用
pointer-events: none关闭上层非交互区域的事件捕获 -
z-index只对定位元素生效（relative/absolute/fixed），普通div再设也没用
scroll-margin、focus-visible、甚至打印样式都可能出意外。 
