Relative CSS Positioning: Parent vs. Self

even though css has been getting a lot of love the past few years (with plenty of animation options, overall visual effects and more granular targeting controls added to the spec), positioning elements remains a big weak spot of css. while page layouting is slowly getting there (the grid and flexbox modules are advancing steadily), we're still missing out on some necessary tools when it comes to relative positioning of elements with css.

relative positioning

when talking about "relative positioning" i mean positioning an element relative to one of its parents (not just limited to position:relative). most positioning work is done between components residing on the same dom level and even though there is still plenty of room for improvement there too (cfr grid and flexbox modules), people often tend to forget about relative positioning (mostly because at first glance it seems like everything is already there).

relative positioning as it exists now is mostly focused on the parent container. any type of positioning you're trying to do, you'll be working with the width of your parent container. but sometimes you want to position something based on the dimensions of the element you're positioning (not to worry, i'll come up with two good examples in a bit). that's when it suddenly become tricky. first things first though.

parent-based relative positioning

 /* html */ <div class="parent"> <div class="self"> ... </div> </div> /* css */ .parent {widht:800px;} .self {padding:0 25%;} /* padding */ .self {margin:0 25%;} /* margin */ .self {position:relative; left:25%;} /* relative */ .self {position:absolute; left:25%; right:25%; top:0 bottom:0;} /* absolute */ 

in the 4 css examples above you'll find 4 different methods for relative positioning. in all 4 examples i've used offsets of 25% which will all result in an effective offset of 200px (since the values are computed based on the width of the .parent element). the reality of the matter is a bit more complex than i put it here (for example, a percentual top-padding is also based on the width of its parent and not on the height as you might expect - which does lead up to one of two ways to pull off proportional fluid behavior ) but that's a little out of scope for this article.

this is all nice and well, but what if we want to define an offset on an element's own dimensions?

self-based relative positioning

self-based relative positioning becomes essential when you want to center an element. there are two common situations where i've needed this so far:

• center-cropping images
• centering modals/overlays

  .self {position:relative; left:50%; margin-left:-(50% of width .self); top:50%; margin-top:-(50% of height .self);} 

a common technique to do this kind of centering is to first align the left side of .self to the middle of its .parent (ie position:relative; left:50%), then pull .self back to the left by assigning a negative margin half the width of .self. that effectively centers an element horizontally. this is fine if you know the dimensions of .self beforehand, but when dealing with variable dimensions (like the dimensions of an image or the height of an overlay) you're pretty much stuck.

 .self {transform:translatex(-50%) translatey(-50%);} 

it turns out there is actually one property that does exactly this, the downside is that support for css transforms isn't what you call universal and it still relies on a heavy set of prefixes to work cross-browser. a minor downside that can easily be captured in some fallback javascript, but even then using this somehow feels like a hack (or substitute) for a property that doesn't exist just yet.

conclusion

it would be nice to get a few extra options to position elements based on its own dimensions rather than the dimensions of its parent. for now we can make do with the solution above, but it does feel kinda icky and javascript support is required for graceful degradation (whether it degrades gracefully without javascript is up for discussion).

it could be that i missed a css property somewhere that exhibits the same behavior, if so please let me know in the comment section as i'm dying to find a better solution for this.