💅 position: relative，这四种定位怎么用？ 💅
姐妹们！🙋♀️ 最近在学习前端，发现position: relative这个属性可太神奇了！ 它可以让元素在页面上自由移动，还能和其他定位方式配合使用，简直是网页布局的“魔法棒” ✨
今天就来跟大家聊聊position: relative的四种定位方式，以及它们的使用场景，希望能够帮助大家更好地理解CSS布局！
1. static (默认定位)
首先我们要了解默认的定位方式static，它就相当于元素在页面上静止不动，没有任何特殊的位置变化。就像你坐在家里，没有出去玩，就安安静静地待在那里一样😌。
2. relative (相对定位)
相对定位是position: relative，它会以元素自身为参考点，根据top、bottom、left、right属性进行移动。就像你站在家里，可以向左、向右、向前、向后移动一样，但依然是在家里这个空间里。
3. absolute (绝对定位)
绝对定位是position: absolute，它会以最近的父级元素为参考点进行定位。如果父级元素没有设置position属性，就会以body元素为参考点。就像你从家里走出去，以街道为参考点进行移动一样。
4. fixed (固定定位)
固定定位是position: fixed，它会以浏览器窗口为参考点进行定位。无论你滚动页面到哪里，它都固定在同一个位置。就像你坐在一辆行驶的汽车里，你自身是固定的，但景色在不断变化一样。
| 定位方式 | 描述 | 参考点 |
|---|---|---|
| static | 默认定位 | 无 |
| relative | 相对定位 | 元素自身 |
| absolute | 绝对定位 | 最近的父级元素或body |
| fixed | 固定定位 | 浏览器窗口 |
实际运用：
1. 相对定位：可以用来制作一些简单的动画效果，比如鼠标悬停时元素的移动。
2. 绝对定位：可以用来制作一些弹窗、菜单栏等，方便控制元素的位置。
3. 固定定位：可以用来制作导航栏、页脚等，使它们始终保持在页面上的固定位置。
小贴士：
1. 使用position属性时，需要配合top、bottom、left、right属性来控制元素的位置。
2. 使用absolute或fixed定位时，需要设置父级元素的position属性，否则会以body元素为参考点。
希望这篇笔记能帮助你更好地理解CSS定位！ 🥰 如果还有其他欢迎在评论区留言哦！