General about position

The position attribute in CSS is used to determine the position of an element relative to other elements and relative to the browser window.

You can set the following values to this attribute: static, relative, fixed, absolute, sticky. Each of these properties is used for a specific purpose.

In this hint we'll focus on:

• short about static position;
• most used position attribute values: relative, absolute, fixed;
• position sticky;

Short about static position

HTML elements are positioned static by default. This means that if you don't specify any other position value it'll be static. An element with position static is not positioned in any special way, it is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. If you want to change default position of element you should set any other position attribute value except static.  

Most used position attribute values: relative, absolute, fixed

Attribute values such as relative, absolute, fixed are often used for elements’ positioning. Let's find out what each of them is used for and how we should use them.

Relative. An element with “position: relative” is positioned relative to its normal position. Setting the top, right, bottom, and left properties of such element will cause it to be adjusted away from its normal position. Important to remember that moving this element will not affect other elements and they will still remain in their actual position and actual space. 

This position value is used for cases when you want to move some element from its normal position but at same time don't want to change placement of other elements. Also you can use relative position for element if you want to use "position: absolute" for its child and child should be positioned relative to this element.

Absolute. An element with “position: absolute” is positioned relative to the nearest positioned ancestor with the position set to either relative or absolute (if there is no such ancestor, < html > tag will be used as ancestor). When such an ancestor is found, this element is moved relative to this ancestor by using left, right, top, bottom specified values. Absolute positioned elements are removed from the normal flow, and can overlap other elements.

This position value is usually used for popups or dropdowns that positioned relative to some element.

Fixed. An element with “position: fixed” is positioned relative to the viewport (viewport is the area of a web page visible to the user), which means it always stays in the same place even if the page is scrolled. Container block is not always the viewport of the browser. The container element can change if any of the ancestors of the fixed element has a transformative, perspective, or filter property set to something else other than none. In such cases, this ancestor becomes the container block, and the fixed element’s behavior changes accordingly. When the block position is identified, the final position depends on the top, left, right, bottom properties only. For an accurate demonstration of how fixed position works using an image isn't enough, so you can find demonstration of 'position: fixed' work here. Fixed position is often used for popups/navbar/menu positioning etc.

Position sticky

The fifth value of the CSS position that came after all of the values discussed above is the sticky value.  A position sticky element toggles between the relative value and the fixed value. Using “position: sticky” would be useless without specifying top/right/bottom/left property. If the element has not yet reached the threshold (top/right/bottom/left property), it retains in the relative position. To see how this work you also can visit this link.

As you can see sticky position was highlighted in separate paragraph. There are some reasons of that. First of all it works much different from other values of position property. Also using the sticky position is the convenient way(the best way for my opinion) to handle table overflow if you want to make fixed header or some cells: it is simple to use and it significantly reduces css code. The only thing you need to remember when using sticky positions for tables: you should set "position: sticky" to cells (<th>, <td>) not for rows or general table header.