深度解密CSS position：90%的面试者都答错的问题

引言

我想大部分人面试中都被问过：position: absolute是针对于什么定位的？

然而90%的面试者都脱口而出：针对relative。然而真相真的是这样吗？

本文将给你答案。

一、走进文档流的世界

        文档流是CSS中最基本的布局模型，类似于文本中字符自动换行排列的机制，网页元素默认按照源代码顺序自上而下、自左向右排列。除非被特定属性干预，否则元素会随流而动，紧紧跟随前后邻居的脚步。

示例：

<div>我是第一个元素。</div>
<div>紧跟着第二个。</div>
<!-- ...更多元素... -->

每个<div>标签下的文本将依次向下排列，形成自然的文档流。

二、css中的position属性：布局的魔法钥匙

        在CSS的世界里，position 属性堪称布局领域的魔法师，它赋予了网页元素“自主意识”，让它们能够超越简单的文档流秩序，在页面上自由舞动。这项属性决定元素是如何在其容器内定位的，以及是否脱离文档流——这个虚拟的“河流”，元素们通常按序流动的方向。

        它定义了一个元素相对于其正常位置（或指定的父级元素）的定位方式。共有五种主要取值选项：static、relative、absolute、fixed 和