CODEWITHSUNDEEP
csstailwind-css
Ray Purchase
Ray Purchase

Reputation: 762

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

Consider the following button:

 <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>

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

Upvotes: 0

Views: 43

Answers (1)

Alohci
Alohci

Reputation: 82986

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.

Upvotes: 3

Related Questions