Using CSS Positioning to have an awesome layout

Let’s get down to business. As a front end developer, oftentimes, we narrow our scope and thoughts to flex and grid… Well, that doesn’t sound like a bad idea, yet let’s not underestimate the power of positioning properties!

Having a solid understanding of the underlying CSS position property goes more than a long way in understanding and accomplishing an awesome CSS based layout… so let’s dive right into it and see what I am talking about.

CSS gives us access to five main position properties: static, relative, fixed, absolute, and inherit. As with most things, understanding the purpose of each specific property is key to creating an awesome CSS-based layout.

Static

Did you know that by default, when we don’t explicitly give an HTML element a position property value, an implicit position value of static gets applied to it?

It is worth noting, however, that the special offset properties(top, bottom, left, right) are unavailable to statically positioned elements. Hmm, you might want to ask and know how these offset properties work If so, kindly read on.

Relative

Another wonderful position property that the CSS specification has to offer is the relative property value, which behaves just like a statically positioned element. So what then is the difference, and why does it exist?

Well, under the hood, relatively positioned elements hide far greater power than their static sibling. As such, you already might have guessed that the offset properties that are unavailable to static elements apply to the relatively positioned element.

How then do I apply these offset values? Well, the values are sort of self-explanatory. In simple terms, they give you the ability to play around with any side of the element, thus shifting it around from its normal position without affecting the element next to it. Nothing more, it’s just that simple.

It is worth noting that a relatively positioned element creates a coordinate system for its child element. Hmm yet again, what does this system mean? Well, read on to find out.

Absolute

You might have been wondering if any of the CSS position properties give you the ability to design your own world? Here comes that property value (absolute) which unlike static and relative, gives you the ability to put an element anywhere, anytime without actually affecting or being affected by another element, simply by using the special offset values to stick the element wherever, yes you read that clearly, wherever on the page as you deem fit.

But how do I position it within its actual container and not just anywhere on the browser viewport, you may ask? Well, I hope you remember the coordinate system we spoke about earlier! All you have to do is set the container to position relative, and boom, there you have it, the child element reads it’s offset values with respect to its container.

Fixed

Remember that the relative position property behaves similarly to static property values? In this case, the position property value of fixed behaves similarly to the absolute property value. Thus it shares all the rules of an absolutely positioned element, except that the browser viewport positions the element, as opposed to any parent element that is achievable using the absolute value as discussed above.

It is worth noting that a fixed element does not scroll with the document. As its name implies, it stays, well…fixed. This is a little trick that can be applied to nav or footer elements to prevent them from scrolling alongside the entire webpage.

Inherit

Without much to be explored, inherit is what the name suggests, it inherits the parent’s position value and sets it as its own.

Typically, position property elements do not naturally inherit their parent values. As explored earlier, the static position property value is assigned to an element by default if no position value is given. Hence, you can use “inherit” or the parent element’s value and boom — you end up with the same result.

Conclusion

With the CSS position property power, you can accomplish many layouts with confidence and success.

Hopefully, you now have a high-level overview of CSS positioning.

Feel like diving straight into practicing what you have learned so far? Kindly check out this awesome playground http://www.barelyfitz.com/screencast/html-training/css/positioning/ to see the differences between the above-discussed positioning schemes.

Please give this article a clap if you have learned something. Happy Coding