Understanding the CSS Position Property

Probably one of the more confusing properties to grasp when getting into CSS is the position property. The position property specifies the position of an element on a page or relative to some other element. It depends on the top, bottom, left, and right property values to determine the final position of the element. There are 5 values for the position property which includes:

• position: static;
• position: absolute;
• position: fixed;
• position: relative;
• position: sticky;

Static (position: static;)

It is crucial to understand the static value to understand certain other values of the position property. The static value is the default value of any HTML element. With the static value, the element is not affected by the top, bottom, left, and right property values. The element is instead positioned according to the sequence/flow of the document which is how they are placed in the HTML file.

Absolute (position: absolute;)

With position absolute, an element is removed from the document flow and is positioned absolutely either relative to its closest positioned ancestor ( a parent element that has a position other than static ) or absolutely relative to its containing block. For example, an element is contained in a parent element with a position value of relative and that element's position is set to absolute with a top of 0, the element's position would be at the very top of the parent element. In a scenario where the parent element is set at the default position of static and there exists no other positioned ancestor, the element would be positioned at the top of its containing block.

Fixed (position: fixed;)

When the fixed value is used, the element is positioned relative to the viewport which is the visible portion of a page at any given time. The element stays in the same location on the page even when scrolling. Its position on the page is then dependent on the values of the top, bottom, left, and right properties. For example, when the value of the top property is set to say 40px, the element will always stay 40px from the top of the viewport.

Relative (position: relative;)

When the relative value is used, the element’s position is set relative to its normal position on the page (basically static positioning with rights). With the relative value, the position of the element can then be set with top, bottom, left, and right properties. Say the value of left is set to 40px, the element is positioned 40px left from its normal position. The position set with the values of top, bottom, left, and/or right does not affect the position of other elements which might lead to it overflowing above other elements.

Sticky (position: sticky;)

The more complex of the bunch; the sticky value is one that positions an element based on scroll action. It can be seen as a mix of relative and fixed positioning; the position of the element remains relative until it reaches a criterion at which point it then becomes fixed. The criteria to specify for position sticky to work is either a top, bottom, left, or right value. For example, if we were to set the position of an element to sticky and the top to 0, the element would act normally (relative positioning) up until the point when the top of the element touches the top of the view-port at which point the top value would in fact be 0 and then the element switches and becomes fixed to the top of the view-port. Something to note is that position sticky is not compatible with all browsers.

That's a wrap. Feel free to leave a comment or send me a DM on Twitter @Phemi_T should you require further clarification.