目录

一、理解标准流与队伍的类比

二、relative 定位：队伍中 “小范围活动” 的人

三、absolute 定位：队伍中 “彻底离队” 的人

在学习 CSS 的过程中，定位属性relative和absolute常常让初学者感到困惑。它们的行为方式和对页面布局的影响较为抽象，不过，我们可以通过一个生动的比喻 —— 排队，来轻松理解这两个重要的 CSS 属性。

一、理解标准流与队伍的类比

在 CSS 布局中，标准流是基础的布局方式，它如同一个井然有序的队伍。在这个队伍里，元素按照它们在 HTML 文档中的先后顺序，依次排列，就像人们一个挨着一个排队一样。每个元素都有自己固定的位置，这个位置是基于前面元素的位置和自身的大小来确定的。例如，一个段落元素会紧接着它前面的元素（可能是另一个段落、标题等）出现，并且它们之间的间距和排列顺序都是遵循一定规则的。这个队伍就是我们理解relative和absolute定位的基础场景。