CSS定位position有哪些方式，不同方式之间有什么区别

CSS的position属性用于指定元素在页面中的定位方式，不同的取值对应完全不同的布局表现，理解这些差异是做好页面布局的基础。

position的五种取值

position属性共有五个常用取值，分别是static、relative、absolute、fixed、sticky，下面逐一介绍每种取值的特性。

1. static 静态定位

这是所有元素的默认定位方式，元素按照正常的文档流排列，设置top、right、bottom、left属性不会生效，元素也不会脱离文档流。

/* 静态定位是默认值，无需额外设置，以下写法没有实际效果 */
.box {
    position: static;
    top: 20px; /* 不会生效 */
    left: 30px; /* 不会生效 */
}

2. relative 相对定位

相对定位的元素会相对于自身在文档流中的原始位置进行偏移，偏移后原本在文档流中占用的空间仍然保留，不会脱离文档流，其他元素的位置不会受到影响。

/* 相对定位示例，元素相对自身原位置右移20px，下移10px */
.relative-box {
    position: relative;
    top: 10px;
    left: 20px;
}

3. absolute 绝对定位

绝对定位的元素会脱离文档流，不再占据原本的空间，其偏移参考的是最近的非static定位的祖先元素，如果不存在这样的祖先，则参考初始包含块（通常是html元素）。

/* 父元素设置相对定位，作为绝对定位子元素的参考 */
.parent {
    position: relative;
    width: 300px;
    height: 200px;
}
/* 子元素绝对定位，相对于父元素右上角偏移 */
.child {
    position: absolute;
    top: 0;
    right: 0;
}

4. fixed 固定定位

固定定位同样会脱离文档流，其偏移参考的是浏览器的视口，即使页面滚动，元素的位置也不会发生变化，常用于顶部导航栏、侧边悬浮按钮等场景。

/* 固定定位示例，元素固定在视口右下角 */
.fixed-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

5. sticky 粘性定位

粘性定位是相对定位和固定定位的结合，元素在跨越特定阈值前表现为相对定位，之后表现为固定定位，常用于列表的表头固定、导航栏滚动吸顶等场景。

/* 粘性定位示例，元素滚动到距离视口顶部10px时固定 */
.sticky-box {
    position: sticky;
    top: 10px;
}

不同定位方式的区别对比

为了更清晰地看到不同定位方式的差异，我们可以通过下表进行对比：

实际场景选择建议

在实际开发中，我们可以根据需求选择合适的定位方式：如果是常规文档流布局，不需要额外设置position，使用默认的static即可；如果需要微调元素位置且不影响其他元素布局，选择relative；如果需要将元素放到父容器的指定位置，且不需要占据原空间，选择absolute，同时记得给父容器设置非static定位；如果需要元素始终固定在屏幕某个位置，选择fixed；如果需要元素滚动到特定位置后吸顶或吸底，选择sticky。

注意：使用absolute和fixed定位时，元素会脱离文档流，可能会导致父元素高度塌陷，需要额外处理父元素的布局问题。

CSSposition相对定位绝对定位固定定位修改时间：2026-06-07 02:43:18