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:
- Static
- Relative
- Absolute
- Fixed
- 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.
Top comments (0)