🎯 CSS 定位详解：从入门到面试通关

前言：定位是 CSS 布局中最核心也最容易混淆的知识点之一。本文通过 5 个完整代码示例，带你彻底搞懂 position 的 5 个属性值，附带高频面试考点！

📚 一、先搞懂什么是「文档流」

在讲定位之前，必须理解 文档流（Document Flow） 的概念。

css 复制代码

文档流 = HTML 元素默认的布局方式
├── 块级元素：垂直排列（从上到下）
├── 行内元素：水平排列（从左到右）
└── 遵循自然顺序排列

脱离文档流的元素

方式	是否占位	影响其他元素
`display: none`	❌ 不占位	✅ 会影响
`position: absolute`	❌ 不占位	❌ 不影响
`position: fixed`	❌ 不占位	❌ 不影响
`position: relative`	✅ 占位	❌ 不影响
`position: sticky`	✅ 占位	❌ 不影响
`position: static`	✅ 占位	❌ 不影响

🎨 二、5 种定位详解（附代码演示）

1️⃣ position: static（静态定位）

默认值，元素按正常文档流排列。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Static 静态定位</title>
  <style>
    * { margin: 0; padding: 0; }
    .parent {
      width: 500px;
      height: 500px;
      background-color: pink;
      left: 100px;    /* ⚠️ 无效！static 不支持偏移 */
      top: 100px;     /* ⚠️ 无效！*/
      position: static;
    }
    .child {
      width: 300px;
      height: 200px;
      background-color: blue;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box">Hello World</div>
  <script>
    const oParent = document.querySelector('.parent');
    setTimeout(() => {
      oParent.style.position = 'static';  // 5秒后恢复默认定位
    }, 5000)
  </script>
</body>
</html>

核心特点：

✅ 默认定位方式
✅ top/left/right/bottom/z-index 全部无效
✅ 可用于取消元素已有的定位属性

2️⃣ position: relative（相对定位）

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Relative 相对定位</title>
  <style>
    * { margin: 0; padding: 0; }
    .parent {
      width: 500px;
      height: 500px;
      background-color: pink;
      position: relative;
      left: 100px;   /* 向右偏移 100px */
      top: 100px;    /* 向下偏移 100px */
    }
    .child {
      width: 300px;
      height: 200px;
      background-color: skyblue;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box"></div>
</body>
</html>

核心特点：

特性	说明
参考点	元素原来的位置
文档流	❌ 不脱离，原位置继续占位
偏移属性	✅ `top/left/right/bottom` 有效
层叠	可能覆盖其他元素

📌 重要用途 ：作为 absolute 子元素的定位参考父容器！

3️⃣ position: absolute（绝对定位）

相对于最近的已定位父元素进行定位。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Absolute 绝对定位</title>
  <style>
    * { margin: 0; padding: 0; }
    body { background-color: azure; }
    .parent {
      opacity: 0.9;
      width: 550px;
      height: 500px;
      background-color: pink;
      position: relative;  /* 🔑 关键：父元素需要定位 */
    }
    .child {
      width: 300px;
      height: 200px;
      background-color: skyblue;
      position: absolute;
      right: 100px;        /* 距离父容器右边 100px */
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      position: relative;
      left: 100px;
      top: 100px;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">
      <div>123</div>
    </div>
  </div>
  <div class="box">Hello world</div>
  <div>456</div>
</body>
</html>

核心特点：

特性	说明
参考点	最近 `position ≠ static` 的祖先元素
无定位父级	参考 body/视口
文档流	❌ 完全脱离，不占位
偏移属性	✅ 全部有效

🔍 查找参考元素规则：

arduino 复制代码

向上查找父元素
├── 找到 position ≠ static → 以它为参考
└── 都没找到 → 以 body/视口为参考

4️⃣ position: fixed（固定定位）

相对于浏览器视口进行定位。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed 固定定位</title>
  <style>
    * { margin: 0; padding: 0; }
    .parent {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
    }
    .child {
      width: 300px;
      height: 200px;
      background-color: blue;
      position: fixed;
      right: 100px;    /* 距离视口右边 100px */
      bottom: 100px;   /* 距离视口底部 100px */
    }
    body {
      height: 2000px;  /* 制造滚动条 */
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="box"></div>
</body>
</html>

核心特点：

特性	说明
参考点	浏览器视口（viewport）
文档流	❌ 完全脱离
滚动行为	🔄 不随页面滚动
典型场景	返回顶部按钮、固定导航栏、悬浮客服

5️⃣ position: sticky（粘性定位）

relative 和 fixed 的混合体，根据滚动位置切换行为。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sticky 粘性定位</title>
  <style>
    * { margin: 0; padding: 0; }
    .parent {
      width: 500px;
      height: 500px;
      background-color: pink;
    }
    .child {
      width: 300px;
      height: 200px;
      background-color: blue;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: green;
      position: sticky;
      top: 100px;   /* 🔑 阈值：滚动到距离顶部 100px 时固定 */
    }
    body {
      height: 2000px;  /* 制造滚动条 */
    }
  </style>
</head>
<body>
  <div class="parent"></div>
  <div class="child"></div>
  <div class="box">Hello World</div>
</body>
</html>

核心特点：

特性	说明
参考点	滚动容器（通常是父元素）
文档流	✅ 不脱离，原位置占位
行为切换	`relative` → 滚动到阈值 → `fixed`
必要条件	⚠️ 必须指定 `top/left/right/bottom` 至少一个

📌 工作原理：

scss 复制代码

滚动前：表现像 relative（正常文档流）
    ↓ 滚动到阈值（top: 100px）
滚动后：表现像 fixed（固定在视口指定位置）
    ↓ 父容器滚动出视口
恢复：跟随父容器离开

📊 三、5 种定位对比总表

属性值	脱离文档流	参考点	top/left 有效	随滚动移动	原位置占位
`static`	❌	无	❌	✅	✅
`relative`	❌	自身原位置	✅	✅	✅
`absolute`	✅	最近定位父元素	✅	✅	❌
`fixed`	✅	浏览器视口	✅	❌	❌
`sticky`	❌	滚动容器	✅	部分	✅

🎯 四、高频面试考点

❓ 考点 1：relative 和 absolute 的区别？

scss 复制代码

答案要点：
1. relative 不脱离文档流，absolute 脱离
2. relative 参考自身原位置，absolute 参考最近定位父元素
3. relative 原位置继续占位，absolute 不占位
4. relative 常用于给 absolute 做父级参考

❓ 考点 2：absolute 的参考元素如何确定？

scss 复制代码

答案要点：
1. 向上查找祖先元素
2. 找到第一个 position ≠ static 的元素
3. 如果都没有，参考 body/初始包含块
4. 注意：relative/absolute/fixed/sticky 都算定位元素

❓ 考点 3：fixed 和 absolute 的区别？

scss 复制代码

答案要点：
1. 参考点不同：fixed 参考视口，absolute 参考父元素
2. 滚动行为：fixed 不随滚动，absolute 随滚动
3. 都脱离文档流，都不占位
4. 父元素 transform 会影响 fixed（变成相对于父元素）

❓ 考点 4：sticky 的使用条件和限制？

scss 复制代码

答案要点：
1. 必须指定 top/left/right/bottom 至少一个阈值
2. 父元素高度必须大于子元素（否则无法滚动）
3. 父元素 overflow 不能为 hidden/auto/scroll
4. 兼容性：IE 不支持，移动端需注意

❓ 考点 5：如何让元素水平垂直居中？

css 复制代码

/* 方案 1：absolute + transform */
.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 方案 2：flex（推荐） */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方案 3：grid */
.parent {
  display: grid;
  place-items: center;
}

⚠️ 五、常见坑点总结

坑点	说明	解决方案
static 用偏移属性	无效	改用 relative/absolute
absolute 乱跑	父元素没定位	给父元素加 `position: relative`
sticky 不生效	没设阈值/父元素高度不够	检查 top 值和父容器高度
fixed 被 transform 影响	祖先有 transform	避免在 transform 元素内用 fixed
z-index 不生效	元素没定位	确保 position ≠ static

📝 六、实战建议

css 复制代码

/* ✅ 推荐写法：定位父容器 */
.container {
  position: relative;  /* 作为子元素 absolute 的参考 */
}

.icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ✅ 推荐写法：固定导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* ✅ 推荐写法：返回顶部按钮 */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

/* ✅ 推荐写法：表格表头sticky */
th {
  position: sticky;
  top: 0;
  background: white;
}

🎓 总结

定位类型	一句话记忆
`static`	默认值，偏移属性无效
`relative`	相对自己，不脱流，占位
`absolute`	相对父级，脱流，不占位
`fixed`	相对视口，脱流，不滚动
`sticky`	相对滚动，不脱流，阈值切换

💡 学习建议：把本文 5 个代码示例复制到本地运行，手动修改参数观察效果，比死记硬背强 10 倍！

觉得有用请点赞收藏 🌟，面试前拿出来复习一遍！