position 定位属性

最后更新：2026-09-13

position position 定位属性

position 属性用于指定元素的定位方式，决定元素是留在文档流中，还是相对于某个参考点进行偏移。配合 top、right、bottom、left 属性，可以实现相对定位、绝对定位、固定定位和粘性定位等常见布局效果。

分类
初始值	static
继承	否
适用于	all
可动画	discrete
CSS 版本	CSS2
状态	标准

📝 语法

position: static | relative | absolute | fixed | sticky;

⚙️ 取值

值	类型	描述
`static \| relative \| absolute \| fixed \| sticky`	关键字	定位类型：静态/相对/绝对/固定/粘性

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
position	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： absolute 元素会相对于最近的非 static 祖先元素定位，因此通常需要给父元素设置 position: relative 作为定位参考。

注意： fixed 元素会相对于视口定位，移动端浏览器对此支持存在差异，某些情况下可能出现抖动或定位不准。

❓ 常见问题

Qabsolute 和 relative 有什么区别？

Arelative 元素仍留在文档流中，top/left 等偏移是相对其原本位置移动，原空间被保留；absolute 元素脱离文档流，不占空间，相对最近的定位祖先（非 static）定位，找不到就相对视口定位。口诀：relative 让自身移动并留位，absolute 脱离文档流并相对祖先定位。

Qsticky 和 fixed 有什么不同？

Afixed 始终相对视口定位，滚动时固定不动，脱离文档流；sticky 是 relative 和 fixed 的结合：滚动到阈值前表现为 relative 随内容滚动，越过阈值后像 fixed 钉在父容器内，且只能在父容器范围内粘住。sticky 必须设 top 等阈值，父容器不能有 overflow:hidden。

Qposition:absolute 是相对于谁定位的？

Aabsolute 元素相对最近的定位祖先（position 非 static 的元素）的 padding box 定位；如果所有祖先都是 static，就相对初始包含块（通常是视口）定位。因此常见做法是给父元素设置 position:relative 作为定位上下文，让子元素的 absolute 偏移相对父容器计算。

Qposition:sticky 不生效是什么原因？

A常见原因：1）父容器高度不够，sticky 元素没有足够的滚动空间；2）父容器或祖先设置了 overflow:hidden/auto/scroll，会导致 sticky 失效；3）没有设置 top/bottom 等阈值；4）元素被放在无法滚动的容器中。排查时逐一检查这几点，尤其注意祖先元素的 overflow 设置。