别再被 CSS 定位搞晕了！5 种 position 一图打尽 + 实战代码全公开

CSS 定位机制详解：从文档流到五种定位方式实战

在网页开发中，如何精准控制元素的位置 是每个前端开发者必须掌握的核心技能。而这一切的基础，就是 CSS 的定位（Positioning）机制。

本文将结合我自己的学习笔记和实践代码，带你一步步理解：

什么是文档流？
五种 position 值的区别与使用场景；
每种定位方式的实际效果演示。

所有示例代码均来自我的本地实验文件（1.html ~ 5.html），力求真实、可复现。

一、什么是"文档流"？

在深入定位之前，我们必须先理解一个底层概念：文档流（Document Flow） 。

文档流是 HTML 元素默认的布局方式：

块级元素（如 <div>）垂直排列，独占一行；

行内元素（如 <span>）水平排列，从左到右；

整体遵循 从上到下、从左到右 的自然顺序。

当一个元素处于文档流中时，它会"老老实实"地排队，后面的元素会根据它的存在来安排自己的位置。

一旦我们使用某些 CSS 属性（如 position: absolute 或 display: none），元素就可能脱离文档流------它不再占据空间，其他元素会"假装它不存在"。

二、五种 CSS 定位方式详解

CSS 通过 position 属性控制元素的定位行为，共有五种取值：

1. `static` ------ 静态定位（默认）

arduino 复制代码

position: static;

这是所有元素的默认定位方式。
元素完全遵循文档流。
top、left、z-index 等属性无效。
通常用于重置已定位元素的行为。

✅ 用途：当你想取消某个元素的定位效果时，可以显式设置 position: static。

📌 效果展示区（static）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>CSS Static 定位 + 块级与行内元素演示</title>
  //样式省略了
</head>
<body>

  <div class="container">
    <h2>1. 块级元素（Block Elements）</h2>
    <div class="block-demo">块元素 A</div>
    <div class="block-demo">块元素 B</div>
    <p class="note">每个块级元素独占一行，垂直堆叠。即使设置了 top/left，static 定位下也不会偏移。</p>

    <h2>2. 行内元素（Inline Elements）</h2>
    <p>
      这是一段文字，包含多个 
      <span class="inline-demo">行内元素 1</span>
      和 
      <span class="inline-demo">行内元素 2</span>
      ，它们会
      <em class="inline-demo">在同一行内排列</em>
      ，不会换行。
    </p>
    <p class="note">行内元素不会独占一行，宽度由内容决定。同样，top/left 对 static 元素无效。</p>

    <h2>3. 关键说明</h2>
    <ul>
      <li><code>position: static</code> 是所有元素的默认定位方式。</li>
      <li>在 static 定位下，<code>top</code>、<code>bottom</code>、<code>left</code>、<code>right</code>、<code>z-index</code> 均 <strong>不生效</strong>。</li>
      <li>块级元素垂直排列，行内元素水平排列------这是正常文档流的表现。</li>
    </ul>
  </div>

</body>
</html>

2. `relative` ------ 相对定位

css 复制代码

position: relative;

元素仍在文档流中，原始位置保留；
通过 top/left 等属性，相对于自己原来的位置偏移；
后续元素仍按原位置布局，不会"让位" 。

💡 我的理解：就像你在排队，但是突然有事需要离开，但是你提前通知了所有人说，这个位置是我的，请帮我留着，就不会有人占据这个位置

✅ 典型用途：

微调元素位置；
作为 absolute 子元素的定位上下文容器。

📌 效果展示区（relative）

为了加深你的理解，我加上了这个绿色的框(实际上不存在)，这就是parent原本占据的地方，你可以认为显示出来的是它的灵魂，但肉体依然留在原地

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relative 相对定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
            left: 100px;
            top: 100px;

        }
        .child{
            width: 300px;
            height: 200px;
            background-color: blue;
           
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
           
        }
    </style>
<body>
    <div class="parent">
        <div class="child">

        </div>
    </div>
    <div class="box">

        </div>
</body>
</html>

3. `absolute` ------ 绝对定位

css 复制代码

position: absolute;
right: 100px;
top: 50px;

元素完全脱离文档流，不占空间；
定位参考点是最近的非 static 定位祖先元素；
如果没有，则以 <body> 为参考。

⚠️ 注意：若父容器未设置 position: relative/absolute/fixed，子元素会"穿透"到更上层！

✅ 用途：弹窗、角标、悬浮按钮等需要精确定位的组件。

📌 效果展示区（absolute）

解析：可以看到和relative不同的是，使用absolute进行定位的元素不会像无赖一样占据着原来的地方 ，而是自己脱离了文档流，而剩余的元素继续按文档流排列，所以图中的123和456才能够排列在原本被占据的部分

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    background-color: azure;
  }
  .parent {
    /* 透明度 */
    opacity: 0.9;
    /* display:none; */
    width: 550px;
    height: 500px;
    background-color: pink;
    position: relative;
  }
  .child {
    width: 300px;
    height: 200px;
    background-color:skyblue;
    position: absolute;
    right: 100px;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: green;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  </style>
</head>
<body>
  <div class="parent">
    <!-- 离开了文档流 -->
    <div class="child"></div>
    <div>123</div>
  </div>
  <div class="box">Hello World</div>
  <div>456</div>
</body>
</html>

这样 .child 会相对于粉色父容器右对齐，且不影响 123 和 456 的布局。

4. `fixed` ------ 固定定位

css 复制代码

position: fixed;

元素脱离文档流；
始终相对于浏览器视口（viewport） 定位；
页面滚动时，元素保持不动。

✅ 用途：固定导航栏、返回顶部按钮、悬浮客服图标。

📌 效果展示区（fixed）

解析：可以看到的是，不论怎么滚动鼠标，蓝色区域始终的相对浏览器的视窗进行定位，它永远在浏览器的固定显示区域进行定位

例如：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 2000px;
  }
  .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;
    bottom: 100px;
  }
  </style>
</head>
<body>
  <div class="parent">
     <div class="child"></div>
  </div>
   
  
  <div class="box">Hello World</div>
</body>
</html>

5. `sticky` ------ 粘性定位

css 复制代码

position: sticky;
top: 100px;

是 relative 和 fixed 的混合体；
在滚动到阈值前表现为 relative，之后变为 fixed；
必须指定 top/bottom 等偏移值才生效。

✅ 用途：表格表头固定、侧边目录吸附。

📌 效果展示区（sticky）

解析：可以看到，绿色区域距离顶部的距离大于阈值(这里设置的100px)时，就会变为fixed定位 ，无论怎么滚动鼠标都不会改变相对于视口的定位，而当这个距离小于阈值时，他又像relative一样变成了正常的文档流 ，整个过程好像绿色区域具有粘性一样，所以叫做粘性定位。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 2000px;
  }
  .parent {
    width: 500px;
    height: 500px;
    background-color: pink;
    
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: green;
    position: sticky;
    top: 100px;
  }
  .child {
    width: 300px;
    height: 200px;
    background-color: blue;
  }
  </style>
</head>
<body>
  <div class="parent">
  <div class="child"></div>

  </div>
  
  <div class="box">Hello World</div>
</body>
</html>

三、脱离文档流的其他方式

除了 position，还有两种常见方式会让元素脱离文档流：

方式	是否脱离文档流	是否占空间
`display: none`	✅ 是	❌ 不占
`visibility: hidden`	❌ 否	✅ 占（只是看不见）

📝 正如我的笔记所写：
display: none 隐藏元素，不占用空间，不会影响其他元素布局。

四、总结对比表

定位类型	是否脱离文档流	定位参考点	是否影响兄弟元素
`static`	否	无	否
`relative`	否	自身原位置	否（占位）
`absolute`	✅ 是	最近非 `static` 祖先	✅ 是（不占位）
`fixed`	✅ 是	视口（viewport）	✅ 是
`sticky`	部分（滚动时）	视口	否（初始占位）

五、结语

CSS 定位看似简单，但背后涉及文档流、包含块、层叠上下文等多个核心概念。通过亲手编写这些小实验，我逐渐理清了它们之间的关系。

记住：

让元素留在文档流中，布局更健壮；

只在必要时使用 absolute/fixed；

用 relative 父容器为绝对定位子元素提供"安全区"。

希望这篇笔记也能帮到正在学习 CSS 定位的你！

别再被 CSS 定位搞晕了！5 种 position 一图打尽 + 实战代码全公开

CSS 定位机制详解：从文档流到五种定位方式实战

一、什么是"文档流"？

二、五种 CSS 定位方式详解

1. static ------ 静态定位（默认）

2. relative ------ 相对定位

3. absolute ------ 绝对定位

4. fixed ------ 固定定位

5. sticky ------ 粘性定位

三、脱离文档流的其他方式

四、总结对比表

五、结语

1. `static` ------ 静态定位（默认）

2. `relative` ------ 相对定位

3. `absolute` ------ 绝对定位

4. `fixed` ------ 固定定位

5. `sticky` ------ 粘性定位