Let me use tailwind css for simplicity.
There are two HTML span elements, #outer and #inner.
<p class="font-mono">
abc<span id="outer" class="relative"><span id="inner" class="absolute left-0 top-0">a</span>a</span>defg
</p>
I expect #inner overlaps with #outer, but instead the actual result shows that the painted characters of #inner is slightly lower than #outer:
Then I check the dev console and find outer’s height is 19px, but inner is 24px.
Why does it happen? What’s the correct way to make them overlap with each other?
>Solution :
Try removing left-0 top-0
<p class="font-mono">
abc<span id="outer" class="relative"><span id="inner" class="absolute">a</span>a</span>defg
</p>
Result:
