为什么改变 html 中绝对定位元素的代码位置会改变它的屏幕位置？

Question

考虑以下按钮：

 <button class="relative flex flex-row items-center justify-center w-56 h-[52px] space-x-2 bg-gray-400">
      <div class='absolute top-0 left-0 flex items-center justify-center w-6 h-6 text-[11px] font-light text-white rounded-full bg-blue-600'>4</div>
      <span class="text-xl font-medium text-black">Notifications</span>
 </button>

在这里，绝对定位的 div 会影响代码中它后面的 span 的位置。但是，如果我们将 div 移动到跨度之后，绝对位置 div 会按预期运行并从文档流中删除。

我以前从未经历过这种情况，这就是我写进去的原因。我一直理解绝对定位的元素将被绝对定位，而不管它放在父容器中的什么位置。

有一个可重现的example here

编辑：我尝试从 div 中删除任何 flexbox 样式，但没有任何区别

Answer 1

当 div 不是第一个可见的 child.

时，将 div 设置为绝对不会阻止它通过 space-x-2 获取应用到它的边距

为什么改变 html 中绝对定位元素的代码位置会改变它的屏幕位置？

Why does altering the code position of an absolutely positioned element in html alter its screen position?

css

tailwind-css