Learn positions in css

By-Shadab Ali

April 24, 2024

Learning positions in css is very important skills for frontend developer. positions is very usefull properties which we use day to day life in order to make good ui

Table of content

static relative absolute sticky fixed

What is positions in css

In CSS, the position property determines how an element is positioned within its parent container or viewport.

This is the default value. Elements with position: static are positioned according to the normal flow of the document. Static position helps us to reset any other position and bring back default. and top, right, bottom, left, and z-index properties have no effect on static element.

I have add some default css to red box

top-40px ,bottom-40px, left-40px, right-40px if you change to any other position other that static then only top will have effect

Relative

Elements with position: relative are positioned relative to their normal position. You can then use the top, right, bottom, and left properties to offset the element from its normal position

position: static

Box

Absolute

An absolute positioned element is positioned relative to the first parent element that has a position other than static You can also use the top, right, bottom, and left properties to position the element precisely.

Change the position on child div. by default child div is static and box is absolute so if change the position of child div other than static then box will change its position according to child div

position: static

Add some top,bottom etc to move

Top

Bottom

Left

Right

parent div: position : static

child: position:static

Box

sticky

Elements with position: sticky are positioned based on the user's scroll position. They behave like relative positioning until the element reaches a specified point, then they "stick" in place.

Change the position to sticky. and scroll it will become sticky at 20px from top

BOX

See this div will never go out of window. it will become sticky at 20px from top

Fixed

Fixed Elements with position: fixed are positioned relative to the viewport, which means they always stay in the same place even if the page is scrolled

Change the position of box to fixed and see how the content is scrolling

position: static

Add some top,bottom etc to move

Top

Bottom

Left

Right

child: position:relative

Box

Hope you learned the position in css in better way. see you in next post any typo or mistake please DM.