Today we gonna talk about
positionproperty 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
positionstyle into 2 groups: static style and non-static style
In this category, we only have 1 value for
positionwhich is considered as a static css is
staticis the default value for position style.
staticposition 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,
staticposition 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.
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.
static position, all the remain values for position CSS is non-static, including:
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
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
For example: this time we try to move non-static element right-down and see what happen
You can also read more about position relative in this post: https://frontend.cloudaccess.host/relative-position-in-css/
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.