Position of absolute inline elements differs

Question

I try to position inline elements absolute to an parent inline element. But for some unknown reason the parent element is larger than it appears. If you try the following, you will see that the absolute right positioned element will be outside of the parent element. This will also be a problem if you use width: 100% which will make the child element be larger than parent. Tested in Firefox 52.

<span style="position:relative;">same position
   <span style="position:absolute; top:100%; left:0;">same position</span>
   <span style="position:absolute; top:200%; right:0;">same position</span>
 </span>

first you can not properly use position absolute without at the minimum an inline-block element. Then also remember that once you place position absolute elements inside they lose their "area". So if whatever you are doing with this if you require some set width or height for the parent set that. — Adrianopolis, Jun 20 '17 at 15:35

Zachary Weixelbaum · Answer 1 · 2017-06-20T16:16:01.467

Your problem is that you are making the inner spans absolute relative to the outer span. Since the outer span only has two words in it, it is only that wide.

<span style="position:relative;width: 100%;display: block;">same position
    <span style="position:absolute; top:100%; left:0;">same position</span>
    <span style="position:absolute; top:100%; right:0;">same position</span>
</span>

This is the code that you want. You will now have the outer span have a width of 100% and the two inner spans will be relative to a wider span and now that you have that you can have the right span at top:100%, unless you want it further down. However, once you make a span have display:block, you might as well just make it a div and not have width: 100%;display: block;

You can do display: inline-block as well if you want it to only be as wide as the parent div.

EDIT Addendum: the inner spans will not look like they are in the outer span because they are position: absolute, which means that their positioning is absolute and none of their parents will reshape because of them. Since their parent is position: relative, their absolute positioning is relative to their parent, but they will not actually be inside their parent when it comes to making the parent div larger. Another possible solution that will have the parent include the text within the element is:

<div>
    same position
    <div style="">same position</div>
    <div style="float: right;">same position</div>
</div>

op talk about the shift of the 2nd child element – Dalin Huang Jun 20 '17 at 15:41 — Dalin Huang, Jun 20 '17 at 15:41

score 0 · Answer 2 · answered Jun 21 '17 at 09:35

After some research I think I got the problem. It is because of the whitespaces at the end of the inline elements. If you remove all whitespaces in this code the result is the expected one. Or you can use some other hacks:

<span style="position:relative;">same position<!--
   --><span style="position:absolute; top:100%; left:0;">same position</span><!--
   --><span style="position:absolute; top:200%; right:0;">same position</span><!--
--></span>

Isn't there any other solution to trim leading and trailing whitespaces? Why does the browsers renders those whitespaces? Is there another code beautifying method than whitespaces?

Position of absolute inline elements differs

2 Answers2