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...