我的网页开发之旅第10天 — 掌握 CSS 定位：Absolute、Relative、Fixed 与 Sticky

Source: Dev.to

绝对定位 — “浮动元素技巧”

/* Box 1 */
position: absolute;

将 position: absolute; 应用于 Box 1 会把它从正常文档流中移除，导致它原本占据的空间被 Box 2 填补，Box 3 也会向上移动——就像俄罗斯方块的块消失一样。

对 Box 2 或 Box 3 使用 position: absolute; 也会产生同样的效果。

相对定位 — “父元素很重要！”

结构

• outer – 父容器
• inner – 子元素
• text – 孙子元素

初始尝试

/* text */
position: absolute;
left: 50%;

该元素相对于整个视口居中，而不是相对于它的父元素。

修正

/* inner (parent) */
position: relative;

现在，对绝对定位的 text 元素使用 left: 50% 时，会相对于其父元素（inner）计算，从而得到预期的位置。

提醒： position: absolute; 需要配合已定位的祖先元素（position: relative;、absolute、fixed 或 sticky）一起使用。

固定定位 — “不可移动的盒子”

/* fixed element */
position: fixed;
top: 10px;
right: 10px;

即使页面滚动，元素仍会锚定在视口上。

典型的使用场景包括导航栏、浮动操作按钮或聊天图标等，需要在滚动时保持可见的元素。

粘性定位 — “混合模式”

/* sticky element */
position: sticky;
top: 0;

粘性元素在滚动到达设定阈值之前（本例中为 top: 0）表现得像相对定位元素，随后会“粘住”在该位置，行为类似固定定位。

常见的应用有粘性标题或章节标题，在滚动时保持可见。

最后思考

通过练习 CSS 定位，我发现这并不是记住各种取值的问题，而是要理解每个属性——absolute、relative、fixed、sticky——如何与其周围环境交互。掌握这些基础后，你就能把任何元素精确放置在需要的位置。

接下来：探索 CSS z-index 与堆叠上下文。敬请期待第 11 天的网页开发之旅！