绝对定位不适合主结构布局，仅适用于脱离文档流的浮层类元素；主结构应使用语义化标签配合Flex或Grid实现。
绝对定位不是网页主结构的布局方案，它只适合浮层、图标标注、弹窗遮罩这类脱离文档流的元素；拿它做 header + main + sidebar 整体排布，大概率会出定位错乱、响应式失效、可访问性崩坏的问题。
什么时候必须用 position: absolute
只有当元素需要「脱离正常文档流、精确锚定在某个参考点」时才用。典型场景包括：右上角关闭按钮、气泡提示框、下拉菜单浮层、轮播图指示器。
- 父容器必须设
position: relative（或absolute/fixed），否则子元素会相对于 viewport 定位，一滚动就飘走 -
top/right/bottom/left值为auto时，元素保留原始位置偏移，不是“不生效”，而是按默认规则计算 - 绝对定位元素不占文档流空间，后面兄弟元素会“无视”它往上挤，容易造成遮挡或重叠
position: relative 的真实作用不是“相对自己”，而是“创建定位上下文”
很多人以为 position: relative 是为了给自身加偏移，其实它最关键的作用是——让子级的 position: absolute 有参照物。没它，absolute 就只能往上找最近的定位祖先，找不到就落到 <html> 根节点。
- 单独用
position: relative加top: 10px，只是把元素视觉下移 10px，但原来的位置仍被占着（留空） - 它本身不改变文档流，也不影响其他元素布局，纯属“打桩”行为
- 别在
<body>上盲目加position: relative——除非你真想让全站所有absolute都以 body 为锚点
为什么不能用 position 做三栏主布局
因为它的控制粒度太粗、依赖手动计算、无法响应式伸缩。比如固定宽度侧边栏 + 自适应内容区，用 position 要写 left: 200px + right: 0 + width: calc(100% - 200px)，而 Flex 只需两行 CSS：
立即学习“前端免费学习笔记（深入）”；
.main { display: flex; }
.sidebar { width: 200px; }
.content { flex: 1; }-
position不处理内容撑高问题：如果侧边栏内容比主内容短，底部对不齐；Flex 默认等高 - 响应式切换要重写整套定位逻辑；Flex 只需改
flex-direction和order - 屏幕阅读器读取顺序和 DOM 顺序不一致时，
position会让语义彻底混乱
真正该用什么替代 position 做页面骨架
现代页面主结构（header / nav / main / aside / footer）一律用语义化标签 + Flex 或 Grid 控制。HTML 提供结构，CSS 提供布局能力，二者不可混用。
- 一维线性结构（如顶部导航、垂直菜单、卡片列表）→
display: flex，注意设好flex-direction和flex-wrap - 二维网格结构（如后台仪表盘、图文混排、固定侧边栏+流式正文）→
display: grid，优先用grid-template-columns而非grid-template-areas - 语义标签必须用对：
<header>不是<div class="header">，<main>不能嵌套多个，<aside>必须与<main>同级
最容易被忽略的是：定位布局从来不是“怎么放得准”，而是“放准之后会不会在缩放、滚动、读屏时失效”。只要主结构用了 position，这个问题就已存在。
