css中position的四个常用值是Static、relative、absolute和fixed:static为默认,不脱离文档流且偏移属性无效;relative相对原位偏移但仍占空间;absolute脱离文档流,相对于最近已定位祖先定位;fixed脱离文档流且始终相对视口固定。

在 CSS 中,position 属性用于控制元素的定位方式,最常见的四个取值是:static、relative、absolute 和 fixed。它们决定了元素如何在文档流中放置以及是否脱离正常布局。
static:默认定位,不脱离文档流
这是所有元素的默认值,元素按正常文档流排列,top、right、bottom、left 和 z-index 属性对其无效。
- 无需显式声明,浏览器自动应用
- 适合不需要特殊定位的普通内容块
relative:相对自身原位置偏移
元素仍保留在文档流中(占据原来空间),但可通过 top、right 等属性相对于它原本的位置做偏移。
- 常用于微调元素位置,或作为 absolute 子元素的定位上下文
- 设置 relative 后,z-index 生效,可用于层叠控制
absolute:绝对定位,脱离文档流
元素完全脱离文档流,不再占据空间,定位参考点是最近的已定位祖先元素(即 position 值为 relative/absolute/fixed/sticky 的祖先);若无,则相对于初始包含块(通常是视口)。
立即学习“前端免费学习笔记(深入)”;
- 必须配合 top、right、bottom、left 使用才有意义
- 常见于弹窗、下拉菜单、图标标注等需要精确控制位置的场景
fixed:固定定位,相对于视口定位
元素脱离文档流,且定位参考始终是浏览器视口(viewport),即使页面滚动,它也保持在屏幕同一位置。
- 适合实现返回顶部按钮、悬浮客服、导航栏吸顶等效果
- 注意:在 ios safari 中某些情况下可能表现异常,需配合 transform: translateZ(0) 或 will-change: transform 修复
基本上就这些。掌握这四个值的关键,在于理解“是否脱离文档流”和“定位参考是谁”。用对了,布局会更可控;用错了,容易出现重叠、错位或滚动异常。