CSS Positions

There are 5 types of positions in CSS

1) Static

2) Relative

3) Fixed

4) Absolute

5) Sticky

1) If we talk about static then this property is default. You cannot use the top, bottom, left, and right properties in static positioned elements

div.static { position: static; border: 3px solid #73AD21; }

2) Let's move to another position relative.

Position relative When you apply position relative to any element then you will see nothing happens with the HTML element. But, now you can use the top, bottom, left and right properties to change the position of the element.

div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }

3) Next property is absolute

An element with position: absolute; is positioned relative to the nearest parent. Only If you give the position relative to his parent.

However, if an absolute positioned element has no parent, it uses the body as parent, and moves top, bottom, left, and right along to the parent.

div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; }

div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }

div.relative > div.absolute this is emmet shorthand

4) Next property is fixed

When you apply fixed property to any tag it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; }

5) Next property is sticky

An element with position: sticky; is positioned based on the user's scroll position. You have to give below CSS to make a div sticky. div.sticky { position: sticky; top:0; border: 2px solid #4CAF50; }