定位

设置position可以控制元素的定位方式：

定位方式	是否脱离文档流	参照对象	常见用途
`static`（默认）	否	无	普通布局
`relative`	否	元素自身原位置	微调、父定位容器
`absolute`	是	最近的定位祖先（relative/absolute/fixed）	精准定位
`fixed`	是	浏览器视口	固定头部、悬浮按钮
`sticky`	否（部分）	滚动容器	吸顶效果

指定top、bottom、left、right属性（水平方向和垂直方向各选一个属性即可）

static

默认值，表示元素不进行定位，即处于静态的状态

relative

相对定位（relative positioning） 是 CSS 中的一种定位方式，通过设置

css

position: relative;

让元素相对于 它在文档流中的原始位置 进行偏移。

当一个元素设置了：position: relative。它依然保留在文档流中原来的位置，只是视觉上移动了位置。

通过以下属性来控制偏移方向：

css

top: 10px;      /* 向下移动10px */
left: 20px;     /* 向右移动20px */
right: 30px;    /* 向左移动30px（与left互斥） */
bottom: 40px;   /* 向上移动40px（与top互斥） */

特点：

特点	说明
位置参照	元素自身原本在文档流中的位置
是否脱离文档流	❌ 否，仍然占据原位置
是否影响其他元素布局	❌ 不影响其他元素的排布
常见用途	为绝对定位（absolute）的子元素提供参照点

absolute

绝对定位（absolute positioning） 让元素脱离正常文档流，并相对于最近的定位祖先元素（非 static）进行定位。

css

position: absolute;

当元素设置：

css

position: absolute;

它会：

脱离文档流（不再占据原有位置）。
相对于最近的“已定位祖先”进行定位。
- 所谓“已定位”，指的是祖先元素设置了 position: relative / absolute / fixed / sticky。
- 如果没有找到这样的祖先，则相对于 浏览器视口（document） 定位。

css

position: absolute;
top: 20px;
left: 50px;

绝对定位特点：

特点	说明
是否脱离文档流	✅ 是
是否影响其他元素布局	✅ 不再影响，像浮在上面一样
参照对象	最近的定位祖先（非 static）
常见用途	弹窗、悬浮层、下拉菜单、精确布局等

提示

子绝父相

fixed

固定定位（fixed positioning） 是一种让元素固定在浏览器视口中的指定位置的定位方式，不会随页面滚动而移动。

css

position: fixed;

当元素设置为 position: fixed 时：

脱离文档流：不再影响或被其他元素影响布局。
相对于视口（viewport）定位：
- 默认相对于浏览器窗口（可视区域）定位；
- 页面滚动时，它依旧保持在指定位置。
不随滚动条移动：无论页面多长，元素始终固定在屏幕上。

常见属性：

属性	作用
`top`	距离视口顶部的距离
`right`	距离视口右侧的距离
`bottom`	距离视口底部的距离
`left`	距离视口左侧的距离
`z-index`	控制层叠顺序（越大越靠上）

常见场景：

应用场景	示例
顶部导航栏	固定在页面顶部：`top: 0; left: 0; width: 100%;`
返回顶部按钮	固定在右下角：`bottom: 20px; right: 20px;`
悬浮客服按钮	固定在页面边缘或角落
固定广告位	固定在视口侧边，不随滚动消失

sticky

粘性定位（sticky positioning） 是一种 介于相对定位（relative）和固定定位（fixed）之间 的定位方式。它能让元素在滚动到某个位置前是相对定位，而超过该位置后则固定在视口中。

css

.element {
  position: sticky;
  top: 0;
}

最近可滚动祖先：overflow不为visible，即为可滚动元素。如果找不到可滚动祖先，那么就是视口。top/bottom/left/right的参考元素是最近可滚动元素

当元素设置为 position: sticky 时：

在滚动前，它和普通的 relative 元素一样，处于文档流中；
当滚动到设定阈值（如 top: 0）时，它会“粘”在这个位置，不再随父元素滚动；
活动范围只能在其“直接父元素”内；父元素滚出视口，粘性效果失效。

危险

父容器的overflow必须为visible，否则sticky定位将会失效
四个方位必须指定一个，否则sticky定位将会失效

属性	作用
`top`	元素距离视口顶部的阈值（触发粘性效果）
`bottom`	距离视口底部的阈值
`left` / `right`	对应水平滚动方向的阈值
`z-index`	控制层级（常在粘性导航栏中使用）

常见应用场景

场景	说明
吸顶导航栏	当用户滚动时保持导航可见
列表分组标题	如通讯录的 A/B/C 分组标题
表格头固定	当滚动表格内容时，表头保持不动
滚动进度提示	某个内容区域内保持在顶部显示当前章节名

定位注意事项

margin:auto对定位元素无效

层叠顺序

z-index 只对“定位元素”生效。元素必须设置 position 为以下之一：

relative
absolute
fixed
sticky

若是默认的 position: static，z-index 无效。

层叠上下文

可以把网页想象成一个由许多「透明盒子」组成的堆叠结构：

每个「层叠上下文」就是一个透明盒子。
盒子内部的元素（子层叠上下文）只能在自己盒子里比较层级。
哪个盒子在上层，取决于它的父级层叠关系。

所以即使子元素的 z-index 再大，也不能跨出父级盒子的范围去压过外面的元素。

z-index的默认值：

css

z-index: auto;

元素不会创建新的层叠上下文；
元素的层叠顺序由 DOM 顺序 决定（写在后面的覆盖前面的）；
如果父元素创建了层叠上下文，则子元素的层叠顺序仅在该上下文内比较。

值	是否创建层叠上下文	含义
`auto`	❌ 否	使用默认层叠顺序（跟随文档流）
数字（如 0、1000）	✅ 是	设置层级并创建新的上下文

定位 ​

static ​

relative ​

absolute ​

fixed ​

sticky ​

定位注意事项 ​

层叠顺序 ​

定位