CSS Positions, the complete guide

This post was originally published on webinuse.com

If we ever used CSS, chances are that we have used CSS Positions. CSS Positions are one of the pillars for creating layouts, so it is of real importance for us to understand them.

Among other things, we use positions for formatting and creating our layout. The position property specifies the type of positioning of an element.

The position property can have 5 values:

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

All of these values require different predispositions and have different effects. Also, an element is positioned using top, left, bottom, right properties. These properties do not work without position property, and, also, they can behave differently depending on different position values.

1. Static

Static positioning, position: static, is default value of any element. In the case of static positioning, top, left, bottom, right properties are not working. Also, elements with position: static are not positioned in any special way. They follow page flow and they are “normally” positioned, according to other elements and page.

In the previous example, even though we have never specified, every element is positioned like static. Because static is the default position for every element.

2. Relative

One of the CSS positions is position: relative. Element with position: relative is positioned relative to its position. This means that its placeholder is kept, but the element can move. By placeholder we mean its original position.

The element can move using top, left, bottom, right properties. When we specify any of those properties element is moved from that position by the specified amount. E.g. if we use top: 20px, along with position: relative, the element will move for 20px from the top, from its original position.

In this example, we moved div 40px from the top. The element with the green border shows where was the original position of our div. Also, an element with a relative position doesn’t interfere with page flow. As a result, it will not affect any other element.

3. Absolute

Out of all CSS Positions, position:absolute is probably the hardest to understand. And, actually, it is the reason why we are writing this article.

First rule: position:absolute works only if the parent has position:relative. This one we must remember. If the parent is not relatively positioned, the element will look for the first predecessor with position:relative. After it finds it, it will RELATIVELY position itself to this predecessor.

Second rule: absolutely positioned elements affect the page flow. When element hasposition:absolute, every element that comes after it will fill the empty space. As a result, every element will move one position back. This is the main reason to be careful with absolute position.

Third rule: every element that has position:absolute, also must have width and height specified. This is due to the fact that when we position elements absolutely it becomes unaware of other elements, and themselves. So, we have to “make it aware” of his width and height.

In our first example for absolute positioning, we have the parent, #relative, that has position: relative and child, #absolute, that has position: absolute. The child is moved for 50px from the parent’s top border, and 80px from the parent’s left border.

So, in our second example for absolute positioning, we have parent, #relative, that is not the direct parent of #absolute, but #absolute is relatively positioned to it.

The reason for this is that two elements, .no-position, HAVE NOT position: relative. And, as we have said in the first rule if the direct parent HAS NOT position: relative, as a result, the element will be RELATIVELY positioned to the first predecessor that has position: relative.

4. Fixed

The position: fixed is not difficult to comprehend as position: absolute was. Every element that has position: fixed is relatively positioned according to the viewport. This means that the element always stays in the same place, even if we scroll the page.

5. Sticky

The position: sticky is something between position: relative and position:fixed. The element toggles between these two states, based on user scroll position. This means that the element is relatively positioned until the user scrolls to a specified offset position. Once, the user is past that position, the element starts behaving like a fixed positioned element. Therefore, the element will “stick” to its current position, hence why we call it sticky.

In order for position: sticky to work, we must specify some offset. Depending on the position and scroll direction any of top, left, bottom, right is good. Also, IE does not support position: sticky and some versions of Safari require the prefix -webkit.

Conclusion on CSS Positions

As we can see from this article CSS Positions are very powerful. We need them in, almost, every project. But, we need to be aware of some things. Overly use of CSS Positions, especially position: absolute can be very tricky when working with responsive design. Also, we have to keep in mind that position:fixed can cover some elements on smaller screens. Therefore, UX can be flawed.

It is worth mentioning that too much use of CSS Positions can also lead to slower loading times or content shifting. This is happening, due to the fact that every time we reload or resize the screen browser needs to calculate the position of each element.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to use the split method in JavaScript.