CSS Positions, the complete guide
Tags: css, design, beginners
Published: 2021-10-13 09:24:16

*This post was originally published on [webinuse.com](https://webinuse.com/css-positions-the-complete-guide/)*

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.

{% codepen https://codepen.io/amersikira/pen/VwzLLJq %}

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 <meta charset="utf-8">`20px` from the top, from its original position.

{% codepen https://codepen.io/amersikira/pen/VwzLvLg %}

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 has`position: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.

{% codepen https://codepen.io/amersikira/pen/XWabmaY %}

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.

{% codepen https://codepen.io/amersikira/pen/porJjad %}

So, in our second example for absolute positioning, we have parent, <meta charset="utf-8">`#relative`, that is not the direct parent of <meta charset="utf-8">`#absolute`, but <meta charset="utf-8">`#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.

{% codepen https://codepen.io/amersikira/pen/rNzVmYW %}


#### 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`.

{% codepen https://codepen.io/amersikira/pen/xxLGdeY %}

### 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](https://twitter.com/AmerSikira), or you can read some of my other articles like [](https://webinuse.com/the-power-of-javascript-slice-method/)[How to use the split method in JavaScript](https://webinuse.com/how-to-use-the-split-method-in-javascript/).