html中css的四种定位方式
通俗解释
### 1. 静态定位：`position: static;` (默认状态，没有特殊定位)
* **通俗解释**：这是家具的“出厂默认状态”。家具会老老实实地按照房间的“阅读顺序”一个接一个地摆放，从上到下，从左到右。你不能用 `top`、`bottom`、`left`、`right` 这些指令来移动它，它会完全忽略这些指令。
* **特点**：
* 这是所有元素的**默认定位方式**，你不用特意写 `position: static;`，它本来就是这样的。
* 它在文档流中占据自己的位置，后面的元素会乖乖地排在它后面。
* 不能通过 `top`/`left` 等属性来精确定位。
* **例子**：就像书架上的书，一本挨着一本，你不能说“把第三本书往右移50厘米”，它必须待在它该在的位置。
---
### 2. 相对定位：`position: relative;`
* **通俗解释**：这个家具本来在默认的位置上（占着那个坑），但它现在有了“自主移动”的能力。你可以告诉它：“以你原来的位置为起点，向右移动100厘米，再向上移动50厘米”。**关键在于，它虽然移动了，但原来的位置还是被它“占着”**，其他家具不会来填补这个空出来的位置，也不会挤占它移动后的新位置。
* **特点**：
* 相对于**它自己原来的位置**进行移动。
* 移动后，**它原来占据的空间依然保留**（就像影子还在），不会影响其他元素的正常布局。
* 常用来作为**绝对定位元素的“参考点”**（后面会讲）。
* **例子**：你把桌子从原来的位置往右上方挪了一点，但地板上那个“桌子印记”还在，别人不会把沙发搬到那个印记上，即使那里现在是空的。
---
### 3. 绝对定位：`position: absolute;`
* **通俗解释**：这个家具变得“不讲武德”了！它会**直接脱离正常的摆放顺序（文档流）**，飘在空中。它会寻找离它最近的一个“有定位的祖先”（这个祖先必须是 `relative`、`absolute` 或 `fixed`），然后以那个祖先的左上角为起点，你告诉它“向右100厘米，向下200厘米”，它就飞到那个位置。如果找不到这样的祖先，它就以整个房间（`<html>`元素）的左上角为起点。
* **特点**：
* 脱离文档流，**不占据原来的空间**，后面的元素会立刻填补上来，就像它从来没存在过一样。
* 相对于**最近的已定位（非static）的祖先元素**进行定位。如果没有，则相对于初始包含块（通常是视口）。
* 常用于精确控制元素位置，比如弹出菜单、模态框、图标覆盖等。
* **例子**：你想在房间的右上角挂一幅画。你不管书架、沙发在哪，直接量好距离墙角多远，把钉子钉上去挂画。这幅画不占地板空间，也不影响其他家具的摆放。
---
### 4. 固定定位：`position: fixed;`
* **通俗解释**：这个家具被“焊死”在房间的某个位置！它相对于**整个房间（浏览器窗口/视口）** 来定位。无论房间里的其他家具怎么移动，或者你上下左右滚动房间的“视角”，这个家具都**纹丝不动**地贴在你指定的位置。
* **特点**：
* 脱离文档流，**不占据原来的空间**。
* 相对于**浏览器的视口（viewport）** 进行定位，即浏览器的可视窗口。
* **不随页面滚动而移动**，始终保持在屏幕的同一个位置。
* 常用于导航栏、返回顶部按钮、悬浮客服等需要始终可见的元素。
* **例子**：你在房间的天花板上装了一个固定的吊扇。无论你在房间里怎么走动（滚动页面），抬头看，它总是在你头顶正上方那个位置。
---
### 总结一下
| 定位方式 | 通俗比喻 | 是否脱离文档流 | 参考点 | 是否随滚动移动 |
| :--- | :--- | :--- | :--- | :--- |
| **static** | 老实排队 | 否 | 无 | 是 |
| **relative** | 在原地挪动，但占着坑 | 否 | 自己原来的位置 | 是 |
| **absolute** | 找个“领导”（祖先），按领导的位置飞过去 | 是 | 最近的已定位祖先 | 是 |
| **fixed** | 焊死在房间墙壁/天花板上 | 是 | 浏览器窗口（视口） | **否** |
示例代码：
<!DOCTYPE html> <!-- 声明用的是英语 --> <html lang="en"> <head><meta charset="UTF-8"><!-- 声明宽度为设备宽度，缩放比例为1.0 --> <!-- 下一句的作用就是控制标签和长度--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--viewport 元标签：主要用于控制移动设备上的页面显示方式width=device-width：设置页面宽度等于设备的屏幕宽度initial-scale=1.0：设置页面初始缩放比例为 1.0（不缩放）这两个属性组合使用，是响应式网页设计的基础，确保页面在移动设备上正常显示--><title>Document</title> <!-- 定义网页在点击时候的标题--><style>
<!-- 先定义一个总的框架和盒子-->
.box {width: 200px;height: 60px;margin: 10px;padding: 10px;color: white;font-weight: bold;text-align: center;line-height: 60px;border: 2px solid #333;}.static {background-color: gray;position: static; /* 其实不写也一样，这是默认值 *//* top/left 等属性对 static 无效 */top: 50px; /* ❌ 这行没用 */left: 50px; /* ❌ 这行也没用 */}/* 2. 相对定位 - 相对自己原来的位置移动 */.relative {background-color: blue;position: relative;top: 50px; /* 向下移动 50px */left: 50px; /* 向右移动 50px *//* 注意：它原来的位置依然被“占用”，下面的元素不会上来填补 */}/* 3. 绝对定位 - 脱离文档流，相对于最近的已定位祖先（这里没有，所以相对 body） */.absolute {background-color: red;position: absolute;top: 100px; /* 距离包含块顶部 100px */left: 100px; /* 距离包含块左侧 100px *//* 它已经脱离正常流，不占位置，后面的元素会忽略它 */}.fixed {background-color: green;position: fixed;top: 20px; /* 距离浏览器窗口顶部 20px */right: 20px; /* 距离浏览器窗口右侧 20px *//* 无论怎么滚动，它都固定在这个位置 */}</style>
</head>
<body><div class="box static">我是 static (默认)</div><div class="box relative">我是 relative</div><div class="box absolute">我是 absolute</div><div class="box fixed">我是 fixed</div><!-- 大量内容，用于产生滚动条 --><div style="height: 1500px; background: linear-gradient(white, lightblue); padding: 20px;"><p>向下滚动看看 fixed 元素是否还在原地！</p></div>
</body>
</html>