CODEWITHSUNDEEP
htmlcss
Nico Richter
Nico Richter

Reputation: 379

Position of absolute inline elements differs

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>

Upvotes: 1

Views: 470

Answers (2)

Nico Richter
Nico Richter

Reputation: 379

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?

Upvotes: 0

Zachary Weixelbaum
Zachary Weixelbaum

Reputation: 914

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>

Upvotes: 1

Related Questions