CSS gives us options to position our elements on the webpage
We can position elements with respect to the viewport, with respect to another element by specifying the top, right, bottom and left values.
We can also fix the position of the element on the webpage.
Let us discuss on position properties in detail.
| position property | Description |
|---|---|
| static | Default value.Elements render in order, as they appear in the document flow.The top, right, bottom and left values has no effect |
| relative | The element is positioned relatively. The top, right, bottom and right values will be applied relative to the element itself.Ex: left:20px will move the element to the left by 20px from it’s current position.The 20px is not w.r.t. the viewport is w.r.t the element’s current position. |
| absolute | The element is removed from the normal document flow and will be placed in an exact location.If there is a parent-child relationship the element is positioned relative to its first positioned (not static) ancestor element.If there is no parent element whose position is other than static then the top, right, bottom and left values are relative to the viewport ( element). |
| fixed | The element is positioned relative to viewport or browser. The viewport doesn’t change when the window is scrolled. |
Note: When the position is static and relative the element remains in the document flow.
When the position is absolute and fixed the element is removed from the normal document flow.
Let us see the usage of static, relative and fixed position properties in the below example.
Change the top value of the third div element to 600px instead of 250px for the scroll bar to be available
Let us see the usage of relative position property when the HTML elements share a parent-child relationship in the below example.
Change the position of the child element to value relative.
Let us see the usage of absolute position property when the HTML elements share a parent-child relationship in the below example.
Let us see the usage of absolute and relative position property when the HTML elements share a parent-child relationship in the below example.
Change the position of the parent from static to relative.
