CSS property: position

Today we gonna talk about position property in CSS, which is one of the most important CSS styles we need to understand deeply in order to create an attractive web.

We can categorize values for position style into 2 groups: static style and non-static style

Static

In this category, we only have 1 value for position which is considered as a static css is static . static is the default value for position style. static position is used when we want to arrange an element stick to normal page flow (elements are arranged left to right, top to down).

In other words, static position lets element and it’s sibling stand on the same floor, it means when a static element’s size is changed, its also effect to its sibling. One important to keep in mind that because static elements stand on the same floor so obviously z-index doesn’t effect on static element and static elements can’t overlap together.

For example: Moving a static element to right-down also cause it’s following siblings are also pushed to right-down.

See the Pen static position by hieu (@phuchieuct93abc) on CodePen.

You can imagine that static-element and its siblings like cars which are running on the same road. When a car turn, the other car needs to move also in order to avoid conflict.

Non-static

Beside static position, all the remain values for position CSS is non-static, including: relative , absolute , fixed sticky and fixed . In contrast with static element, non-static element and its sibling stand on different floors. It means that when the non-static element is moved, it doesn’t effect to its sibling. It’s similar to a car and a plane, when the car turns, the plane is not affected because they run on the separate road. Non-static element can be used with z-index , top , left , right , bottom css, which allows moving non-static element without affecting others

Non-static elements also can be able to sticky on their own position rather than stick to normal page flow like static element.

For example: this time we try to move non-static element right-down and see what happen

See the Pen non-static position by hieu (@phuchieuct93abc) on CodePen.

You can also read more about position relative in this post: https://frontend.cloudaccess.host/relative-position-in-css/

Final word

I hope that this post can help you to understand the difference between static vs non-static element in CSS as well as know the way to move an element with/without affecting other elements. See you in the next post, we will talk more about non-static position values.