Medium博客未用position:absolute实现metabar定位至main标签上方的方法

一、CSS元素的合理定位 #

在实际开发里，选对定位方式能让页面布局更灵活也更易维护，这里整理了几种常用定位的适用场景：

• 静态定位（position: static）：这是元素的默认定位状态，完全遵循正常文档流排列，适合绝大多数不需要特殊位置调整的常规内容模块。
• 相对定位（position: relative）：元素会相对于自身原本的位置偏移，但不会脱离文档流，常用作绝对定位元素的父容器，或是用来微调某个元素的位置（比如图标和文字的对齐）。
• 绝对定位（position: absolute）：元素会脱离文档流，相对于最近的非静态定位父元素定位，适合需要精准固定在某个区域的元素，比如弹窗、悬浮操作按钮等。
• 固定定位（position: fixed）：元素相对于浏览器视口定位，页面滚动时位置保持不变，常用于全局导航栏、回到顶部按钮这类需要始终可见的元素。
• 粘性定位（position: sticky）：结合了相对定位和固定定位的特性，当页面滚动到设定的阈值（比如top: 0）时，元素会从相对定位切换为固定定位，适合侧边栏导航、表格表头固定等场景。

二、Medium博客metabar定位实现方式 #

关于Medium的metabar（顶部导航栏）不使用position: absolute却能定位在main标签上方的问题，核心实现逻辑很清晰：
它采用**position: sticky**配合合理的文档结构来实现：

1. 先将metabar放在main标签之前的文档流位置；
2. 给metabar设置position: sticky和top: 0属性，当页面向下滚动时，metabar会在到达视口顶部时“粘”住，视觉上就悬浮在了main内容的上方；
3. 同时通过z-index属性确保metabar的层级高于main标签内的内容，避免被下方内容遮挡。

内容的提问来源于stack exchange，提问作者mowtheone