What is position property...?

It defines your position for your HTML part. Well, there are five different position values.

1. Static
2. Relative
3. Fixed
4. Absolute

5. Sticky.

   In addition to that, these all properties work as a right, left, top, and bottom. First of all, we need to set the position property and then it can work in CSS.

1. Static Position:

HTML elements are positioned by default as static.

Output:

1. Relative Position:

In this position, When we can set the relative property at the same time box will be moved a little bit down from the same position.

output:

1. Absolute position:

There is a slight difference between relative and absolute. Well in absolute, it takes position to another item. For example, if I target item 2 so you can not see item 3 because item 3 is hidden behind item 2. In short, the overlap is another element.

'

Output:

1. Fixed position:

In this position, we need to fix one element. For example, if we fix item 2 so the rest of the item can move according to your page scrolling. Also, item 2 is as it is on your screen.

Output:

In the above image, you can see Item 1 and item3 both overlap each other because I fixed item3. when I am scrolling the screen at the same time item 1, items 2, and item 4 move to the upper side, and item 3 is the same in its place.

Result:

Sticky Position:

This is a very interesting part to do some tasks. when you give sticky property to any one element so that element can accept all information inside that. It means when you scroll the screen so all information goes inside the sticky property.

Output:

Without scrolling:

After scrolling:

To conclude, Theses all properties are very useful to make a website very innovative. we do not need to memorize all processes just do practicals while we learn. Automatically you can catch up on all the things.