left/right/top/bottom 仅对 position 为 relative、absolute、fixed 或 sticky 的元素生效；static 下被忽略。absolute 的偏移参照最近非 static 祖先，无则参照视口。同时设 left 和 right 时 left 优先；居中需配合 transform 或 margin:auto。top+bottom+height 冲突时 height 被忽略，以 top/bottom 差值为准。flex/grid 更适合常规布局，定位属性适用于浮层、气泡等特殊场景。
left/right/top/bottom 为什么设了没反应？
因为这些属性只对 position 值为 relative、absolute、fixed 或 sticky 的元素生效。默认 position: static 下，设置 left 等值完全被忽略。
- 想微调自身位置（不影响文档流）→ 用
position: relative+top/left - 想脱离文档流、相对于最近的定位祖先（或 viewport）定位 → 用
position: absolute或fixed -
sticky是特殊混合模式，需配合top等触发临界点，不是“固定在某处”，而是滚动时粘住
absolute 定位时 left/top 是相对谁计算的？
取决于最近的、position 不是 static 的祖先元素。没有这样的祖先时，才相对于初始包含块（通常是 viewport）。
- 常见陷阱：父容器忘了加
position: relative，结果子元素absolute跑到 body 顶部左角去了 -
right: 0和left: 0同时设会冲突——浏览器优先满足left（LTR 文本方向下），right被忽略 - 想居中？别只靠
left: 50%，要搭配transform: translateX(-50%)才准；或者用left: 0; right: 0; margin: auto（需设宽度）
top/bottom + height 冲突时浏览器怎么处理？
当同时指定 top、bottom 和 height，且三者无法同时满足时，height 会被当作“建议值”，浏览器优先尊重 top 和 bottom，实际高度由二者差值决定。
.element {
position: absolute;
top: 20px;
bottom: 30px;
height: 100px; /* 这行会被忽略，实际高度 = viewportHeight - 50px */
}
- 同理：
left+right+width冲突时，width被覆盖 - 若只想控制宽高，就别设对边 offset；若想撑满区域，就只设
top/bottom或left/right，不设width/height - Flex/Grid 已成为更可控的对齐方案，纯靠
absolute+ 四个方向定位易失控，尤其响应式场景
fixed 定位下 bottom: 0 不等于“贴底”？
它贴的是 viewport 底部，不是页面内容底部。如果页面可滚动，fixed 元素始终停在视口底部，不会随内容滚动到底部才出现。
立即学习“前端免费学习笔记（深入）”；
- 想让某个按钮“始终在内容区底部可见”，但又随内容滚动 → 用
position: sticky; bottom: 0，且确保父容器有足够高度 -
fixed元素脱离普通文档流，z-index 管理要格外注意，容易被遮挡 - 移动端 Safari 对
fixed支持有历史问题（如键盘弹出时错位），必要时需监听resize或focus做补偿
真正难的不是写对这四个属性，而是判断该不该用它们——多数所谓“精确控制”，其实更适合交给 flexbox 的 justify-content/align-items，或 grid 的 place-self。定位属性适合边界场景：浮层、气泡、返回顶部按钮、画布坐标系映射等。
