当前位置：首页 > article >正文

CSS中五种定位方式（position）对比分析

article 2025/2/24 5:02:23

在 CSS 中，定位方式（position）决定了元素如何相对于其参照物进行定位，同时影响文档流的布局。以下是五种定位方式的对比、参照物说明及代码示例：

1. `position: static`（默认定位）

参照物：无，元素位于默认文档流中。
文档流：元素按照 HTML 顺序自然排列。
特点：top、right、bottom、left 和 z-index 属性无效。

示例：

<div class="box static">Box 1</div>
<div class="box static">Box 2</div>

.box { width: 100px; height: 100px; }
.static { background: lightblue; }

效果：两个盒子上下排列。

2. `position: relative`（相对定位）

参照物：元素自身原本的位置。
文档流：元素仍占据原空间，但可偏移。
特点：通过 top、left 等属性偏移，不影响其他元素位置。

示例：

<div class="box relative">Box 1</div>
<div class="box">Box 2</div>

.relative { 
  position: relative;
  top: 20px;  /* 向下偏移 20px */
  left: 30px;  /* 向右偏移 30px */
  background: lightgreen;
}

效果：Box 1 偏移，但 Box 2 仍占据原位置。

3. `position: absolute`（绝对定位）

参照物：最近的已定位祖先元素（非 static），若无则相对于 <html>。
文档流：元素脱离文档流，原空间被其他元素占据。
特点：需手动指定 top、left 等值，常用于弹出层、图标定位。

示例：

<div class="parent">
  <div class="box absolute">Absolute Box</div>
</div>
<div class="box">Box 2</div>

.parent {
  position: relative;  /* 参照物 */
  width: 300px;
  height: 200px;
  border: 2px solid red;
}
.absolute {
  position: absolute;
  bottom: 10px;  /* 相对于父容器底部 */
  right: 10px;   /* 相对于父容器右侧 */
  background: orange;
}

效果：Absolute Box 定位在父容器右下角，Box 2 紧贴父容器下方。

4. `position: fixed`（固定定位）

参照物：浏览器视口（viewport）。
文档流：脱离文档流，不随页面滚动移动。
特点：常用于固定导航栏、弹窗广告。

示例：

<div class="box fixed">Fixed Box</div>
<div class="long-content">长内容...</div>

.fixed {
  position: fixed;
  top: 20px;  /* 距离视口顶部 20px */
  right: 20px;
  background: pink;
}
.long-content { height: 2000px; }

效果：Fixed Box 始终固定在视口右上角，滚动页面时不动。

5. `position: sticky`（粘性定位）

参照物：最近的滚动祖先（通常是视口）。
文档流：初始位置在文档流中，滚动到阈值后变为固定定位。
特点：需指定 top、left 等阈值，常用于吸顶菜单。

示例：

<div class="sticky-header">Sticky Header</div>
<div class="long-content">长内容...</div>

.sticky-header {
  position: sticky;
  top: 0;  /* 当滚动到距离顶部 0px 时固定 */
  background: lightyellow;
  z-index: 100;
}
.long-content { height: 2000px; }

效果：滚动页面时，Sticky Header 在到达视口顶部后固定。

对比总结

定位方式	参照物	是否脱离文档流	典型场景
`static`	无	否	默认布局
`relative`	自身原位置	否	微调元素位置
`absolute`	最近定位祖先/视口	是	弹出层、精准定位
`fixed`	视口	是	固定导航栏、广告
`sticky`	滚动祖先/视口	滚动时脱离	吸顶菜单、表头