目录
一、理解标准流与队伍的类比
二、relative 定位：队伍中 “小范围活动” 的人
三、absolute 定位：队伍中 “彻底离队” 的人
在学习 CSS 的过程中，定位属性relative和absolute常常让初学者感到困惑。它们的行为方式和对页面布局的影响较为抽象，不过，我们可以通过一个生动的比喻 —— 排队，来轻松理解这两个重要的 CSS 属性。
一、理解标准流与队伍的类比
在 CSS 布局中，标准流是基础的布局方式，它如同一个井然有序的队伍。在这个队伍里，元素按照它们在 HTML 文档中的先后顺序，依次排列，就像人们一个挨着一个排队一样。每个元素都有自己固定的位置，这个位置是基于前面元素的位置和自身的大小来确定的。例如，一个段落元素会紧接着它前面的元素（可能是另一个段落、标题等）出现，并且它们之间的间距和排列顺序都是遵循一定规则的。这个队伍就是我们理解relative和absolute定位的基础场景。
二、relative 定位：队伍中 “小范围活动” 的人
relative定位可以类比为排队时队伍中的某个人，虽然离开了自己原本应该待的位置去 “放风” 了，但他的离开并不影响其他元素的位置。在 CSS 中，当一个元素被设置为relative定位时，它可以通过设置top、right、bottom、left等属性来相对于自己在标准流中的原始位置进行偏移。然而，尽管它的视觉位置发生了改变，它在标准流中原本占据的空间依然保留着。这就好比在一个队伍中，小明站在第三位，他稍微向前或者向后移动了一点距离，但他后面的小红、小李等人依旧站在原来的位置，他们之间的相对位置关系并没有因为小明的移动而改变。在实际应用中，relative定位常用于微调元素的位置，例如，给一个按钮元素设置relative定位，并微调它的top值，使其在页面上的位置看起来更加协调美观，同时又不影响整个页面布局的结构。
.example-relative {
position: relative;
top: 10px; /* 相对于自身原始位置向下偏移10像素 */
left: 5px; /* 相对于自身原始位置向右偏移5像素 */
}
三、absolute 定位：队伍中 “彻底离队” 的人
absolute定位就如同排队时队伍中的某个人彻底离开了队伍去 “疯狂玩耍”。在 CSS 中，absolute定位的元素会脱离标准流，不再占据原本在标准流中的空间。它的位置是相对于浏览器窗口（如果没有已定位的祖先元素）或者相对于最近的已定位父元素（如果存在已定位的祖先元素，这里的已定位指的是祖先元素设置了position值为relative、absolute、fixed或者sticky）。这就好比队伍中的小张突然离开了队伍，他原本的位置空了出来，后面的人会自动向前移动来填补这个空位。例如，在一个包含多个列表项的无序列表中，如果其中一个列表项被设置为absolute定位并移出了列表的范围，那么其他列表项会自动重新排列，占据原本那个列表项的位置。
.example-absolute {
position: absolute;
top: 50px;
left: 100px;
}
在实际项目中，absolute定位常用于创建一些需要独立于正常文档流布局的元素，比如弹窗、悬浮菜单等。通过将这些元素设置为absolute定位，并结合合适的top、right、bottom、left值，可以精确地将它们放置在页面的任何位置，同时不会影响其他正常布局的元素。
通过将 CSS 的relative和absolute定位与排队的场景进行类比，我们可以更加直观地理解它们的工作原理和对页面布局的影响。希望这个比喻能够帮助大家在学习和使用 CSS 定位属性时更加得心应手，轻松应对各种复杂的页面布局需求。