Position
The position
is the CSS property which is used to set the position of an particular target in the document. By setting the property position we enable the usage of four properties which are top
, right
, bottom
and left
these will determine the position of the target in the page. We set the position
property value to give the behaviour to that element then according to the requirement we set the remaining property values.
Types of CSS positioning
There are 5 important position
values which determine the behaviour of the element on the page those are
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky
after giving postion property value we use top
, right
, bottom
and left
properties.
top: 40px;
right: 40px;
bottom: 40px;
left: 40px
Let's talk about each one of them one by one . Remember after giving position we will enable usage of top
, right
, bottom
and left
right. We should set those values inorder to see the changes and how it is behaving.
Values
static
This is the default value of the position property if we do not apply the specific position value then the position value will be static
. It means the target element will be positioned according to the normal flow of the HTML document and the properties top
, right
, bottom
and left
have no effect on the positioning of targeted element
as you can see in the example given above properties top
, right
, bottom
and left
no showing any effect in the positioning and remember the thing even if we not apply the postion
with static
value default position will be static
only.
relative
When we apply the relative
property all the top
, right
, bottom
and left
will be applied from the original position of the targeted element. Original position of the element is considered as the parent element and all other properties show effect considering the original position of the targeted element.
I have added an border on the element targeted for getting an idea remember it has margin: 16px
that is why the border is not accurate for getting an idea i have added it.
absolute
When we apply this property value then the targeted element will have the positioning according to the display size and whatever the heights applied will be calculated from the display size corners. See the example to get an idea. Remember that the position won't be fixed in the position as soon as you start scrolling the screen position will change.
top
, right
, bottom
and left
will be considered from the display size and targeted element comes out from the normal flow of the document
fixed
Yeah its in the name when we apply this property value to the element targeted element will be fixed to screen. It will come out of the normal flow and fixed to the screen. top
, right
, bottom
and left
values will be considered from the screen and it has nothing to do with the other elements. below provided example will give an good idea. Scroll the screen to see what the fixed
is doing to the element
sticky
There is alot confusion between fixed
and sticky
lets see how they are different from each other. When we apply the sticky to an element and give some value in top
, right
, bottom
and left
when these conditions hit then the element will be out of the flow and stays as sticked but where in fixed it will always stays attached to screen. see the below example to get the complete idea.
hope you got understood the CSS Positioning.
Thanks for reading...