定位机制

static 参与正常流，relative 保留原位置后做偏移，absolute 从正常流移出并相对定位祖先放置，fixed 通常相对视口，sticky 在滚动阈值内表现为相对定位并在边界处吸附。每种定位都改变了空间和包含块的责任。

.panel { position: relative; }
.badge { position: absolute; inset: 1rem 1rem auto auto; }
.toolbar { position: sticky; inset-block-start: 0; }

绝对定位元素寻找最近的已定位祖先；没有合适祖先时，包含块可能来自初始包含块。z-index 是否生效还要结合层叠上下文。sticky 受滚动容器、偏移量和自身尺寸影响，并不等于“永远固定在屏幕上”。

实验与练习

为卡片徽章使用绝对定位，为顶部工具栏使用 sticky。分别删除父元素的 position: relative、改变滚动容器和移除偏移量，记录包含块、滚动行为与层叠结果。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 用绝对定位排布所有正文内容。
• 认为 z-index 可以跨越所有父级层叠上下文。
• 使用 sticky 却没有设置任何 inset 偏移。
• 只在一个滚动容器中测试，忽略嵌套滚动边界。

继续阅读

最后回到存量页面中的浮动布局：浮动与清除。

练习

1. 用最小输入复现“定位机制”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案