Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well.
The widely used position property in CSS are as follows:
When an HTML element gets assigned with
static position, the various position properties like
bottom doesn't work. Elements in an HTML document carry static position by default.
Let’s copy and paste the code below in an IDE to view what’s happening.
Upon adding position property
static to the selector id
Div2, we saw that the position of
Div2 box didn't change. Hence, we can conclude that elements with position
static doesn't get affected by
When an element gets assigned with position
relative, the position properties like
bottom affects the element's position in the page relative to it's normal position as
Let’s copy and past the code below to
Div2 selector to replace the previous position property.
We can see that the
Div2 box changed it's position relative to it's normal or
static position, i.e.
20px from the
50px from the
top. Upon applying
relative position property to an element, other contents in the same box doesn't get affected and change positions.
This position property is used to freeze an element in a particular location of the page so that scrolling doesn’t affect the visibility or location of the element. When we apply
fixed value to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from it's actual position, becomes relative to the entire viewport and doesn't get scrolled.
Let’s copy and past the code below to know the difference.
After scrolling, we can see that the id
Div2 gets fixed in the topmost corner of the document.
fixed position, the
absolute position property removes selectors from the flow. As the element gets removed from it's normal position, the parent element doesn't regard it as it's child anymore. The element becomes relative to the document.
Let’s copy and paste the code below to see how
absolute position affects the element.
We can see that the element with id
Div2 becomes absolute to a parent element with id
overall. Let's tweak the code to see how the element with
absolute position behave if there are no parent elements with non
static position value.
/* position: relative; */
The selector element with id
Div2 gets absolute with the document.
absolute position property is applied to an element, it becomes relative to it's parent element if and only if the parent element is not positioned
static. The element becomes absolute to it's nearest parent with position value apart from