Tanvi sabhadiya's team blog

Follow

Tanvi sabhadiya's team blog

Follow
Set Position Property

Set Position Property

Learn position in CSS

Tanvi sabhadiya's photo
Tanvi sabhadiya
·Nov 29, 2022·

2 min read

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.

Screenshot_20221129_103940.png

Output:

Screenshot_20221128_011240.png

  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.

Screenshot_20221129_083259.png

output:

Screenshot_20221129_083236.png

  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.

Screenshot_20221129_085946.png'

Output:

Screenshot_20221129_093101.png

  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.

Screenshot_20221129_101206.png

Output:

Screenshot_20221129_101149.png

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:

Screenshot_20221129_101613.png

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.

Screenshot_20221129_103417.png Output:

Without scrolling:

Screenshot_20221129_102931.png

After scrolling:

Screenshot_20221129_102954.png

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.

 
Share this