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

Consider the following button:

 <button >
      <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 >Notifications</span>
 </button>

Here, the absolutely positioned div is affecting the position of the span following it in the code. However, if we move the div to after the span, the absolutely position div behaves as expected and is removed from the flow of the document.

I've never experienced this before, which is why I'm writing in. I've always understood an absolutely positioned element will be positioned absolutely regardless of where it's placed in the parent container.

There's a reproducible example here

Edit: I have tried removing any flexbox styling from the div, but it makes no difference

CodePudding user response：

Making the div absolute won't stop it acquiring the margin applied to it via space-x-2 when it's not the first visible child.