CSS定位: static/relative/absolute/fixed

0. static
   块级元素默认就是静态定位，在文档流中从上到下堆叠。

1. relative
   相对元素在原文档流位置重新定位，元素原来占据的空间没有动，其他元素也不会动。

<div>
  <div>helllllllllllllll</div>
  <div class="relative top-4 left-4 text-green-600">world-relative</div>
  <div>Good Morning</div>
</div>
<!-- 1rem = 4 = 16px -->

2. absolute
   脱离文档流，相对于“定位上下文”进行定位， 可以用relative将外部元素设定为自己的定位上下文。如果没有显示指定，默认上下文为body，在滚动页面时，为维持与body的相对位置关系也会相应地滚动。

<div>
  <div>helllllllllllllll</div>
  <div class="absolute top-4 left-4 text-red-600">world-absolute</div>
  <div>Good Morning</div>
</div>

3. fixed
   固定定位与绝对定位类似，会完全移出文档流，不同之处在于固定定位的定位上下文为“视口”，不会随页面滚动而移动。

<div class="relative w-1/2 h-32 overflow-y-auto border-red-300 border-2">
  <div>固定定位与绝对定位类似，会完全移出文档流，不同之处在于固定定位的定位上下文为“视口”，不会随页面滚动而移动。固定定位与绝对定位类似，会完全移出文档流，不同之处在于固定定位的定位上下文为“视口”，不会随页面滚动而移动。固定定位与绝对定位类似，会完全移出文档流，不同之处在于固定定位的定位上下文为“视口”，不会随页面滚动而移动。</div>
  <div class="fixed bottom-4 right-4 text-red-600">fixed</div>
  <div>Good Morning</div>
</div>