正在加载...

CSS Position

流式布局课教会盒子如何加入一行。position 回答另一个问题：这个盒子相对其正常位置、祖先或屏幕坐在哪里？在动手 stacking 或 float 技巧之前，先掌握这五个日常取值。

position 工具箱

📊 position 一览

取值 日常用途
static 默认 — top/left 一类偏移通常没用
relative 从正常位置微调；仍占原空间；可为 absolute 子元素锚定
absolute 脱离正常流；相对最近的已定位祖先放置
fixed 脱离文档流；滚动时钉在视口上
sticky 在滚动阈值前像 relative，之后在容器内粘住

偏移 top、right、bottom 和 left 只有在 position 不是 static 时才有意义。先选模式，再微调偏移。

Relative — 礼貌的微调

relative 把元素留在流中。原来的空间仍被预留。小偏移适合视觉微调 — 也适合标出 absolute 子元素应服从的父级。

Relative 微调

css 
.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — 离开文档流

absolute 把盒子拉出正常流。邻居会合上空隙。定位依据最近 position 不是 static 的祖先 — 常常是 relative 父级。没有这个锚点时，元素可能爬到更大的包含块。

Absolute 徽章

css 
.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

给 absolute 一个家

把 absolute 子元素与有意设置的父级配对。用类名标出关系，布局才易读。

已定位父级

css 
.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — 钉在视口上

fixed 把元素钉在屏幕上。滚动页面不会移动它。适合平静的通知或工具条 — 不要把它当每一种分栏布局的捷径。

Fixed 通知

css 
.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — 先 relative，再粘住

sticky 在越过滚动阈值前留在流中（常用 top），然后在可滚动祖先内粘住。它需要滚动空间和合理的父级 — 否则会感觉坏掉了。

Sticky 区块标签

css 
.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

稳健的 position 习惯

用 relative 做小微调与 absolute 锚点。用 absolute 做已知父级内的徽章与覆盖层。把 fixed 和 sticky 留给有意的界面骨架。z-index 层叠与 float 清除留给各自的课。

命名的 position 角色

css 
.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

自己试试

  1. 用 position: relative 和很小的 top / left 微调一个 .card。
  2. 在 relative 的 .media 父级里用 absolute 放一个 .badge。
  3. 在角落加一个小的 fixed 通知 — 滚动并观察它是否留住。
  4. 在可滚动的高区块里用 top: 0 试一个 sticky 标签。
  5. 写一句话：什么时候 absolute 比 fixed 更安全？

常见错误

  • 没有已定位父级就用 absolute，却奇怪它为什么跳得很远
  • 用 fixed 去解决普通页面布局
  • 没有滚动溢出或祖先冲突时仍指望 sticky 生效
  • 把本课当成 inline-block 行课（任务不同）
  • 在这里堆砌 z-index 或 float 配方，而不是学习定位模式

小结

  • position 控制相对文档流、祖先或视口的放置
  • relative 微调并锚定；absolute 在该锚点内离开文档流
  • fixed 钉在视口；sticky 混合 relative 与粘住行为
  • 只有 position 不是 static 时偏移才有意义
  • 层叠与 float 留到后面 — 先掌握五种模式

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 37 的 37
Css 教程