Using `right` with `em`s

So I’m trying to offset a ‘div’ element by “pushing” it to the left behind an img element. However, it doesn’t seem to work as expected when I set the units to ems as opposed to pixels:

With right set to 400px:

With right set to 25em (equivalent to 400px, right?):

It seems to be doing the opposite and I don’t understand why. Does anybody have any advice for how to properly set this div behind this img with responsive, relative units like ems?

What value an em unit is computed to depend on the font-size set on the parent element.

https://jsfiddle.net/p72u8tc1/

why don’t you use vh or vw?
ems are relative to text dimensions, and do not have a fixed value, at least with vh or vw it is always related in the same way to the viewport

That seemed to do the trick! So just to recap, should I use vh \ vw when dealing with divs but not necessarily text?

Since the em unit is calculated by the font-size set on the parent element, it’s just more complicated to keep track of in my opinion.
I find it really easy to position things relative to the viewport (vh/vw). The more you play around with the different units, the better feel you will get with which units to use in the future.

1 Like