css, web development

What are Position Properties in CSS?

The position property will help you place an element wherever you want. For eg:

You can see by using ” position: absolute; ” I can able to manipulate the location of an element.

There are 5 Position Property

  • Static
  • Relative
  • Fixed
  • Absolute
  • Sticky

Static position

All html elements are static by default. The static position elements does not affect anything. The element will stick to the normal page flow.

Relative position

Relative Position is somewhat similar to Static position. If you apply relative position to an element without any extra Property you will not see any differences. But when you add extra information for that element like top 20px, left 50px; You will see that the element will position towards specified values For eg:

  • The below example is with extra information.

Fixed Position

Fixed Position is nothing but placing a element in a fixed location. Even when we scrolled the page it will fixed in that place only. An element with  fixed position is positioned relative to the viewport. For Eg:

Absolute Position

Absolute Position is also similar to fixed position but unlike fixed element it will not be fixed to a position, but the element will be gone when you scroll down. Absolute Position is the element is removed from the normal document flow. The other elements will behave as if it is not there and an absolutely positioned element is relative to its parent. The parent must have position as relative. For eg:

You can see that box is the parent and .hello-world is the child. Here the box is relative and .hello-world is absolute.

Sticky position

Sticky Position is very similar to fixed position.  It is positioned relative until a given offset position is met in the viewport – then it “sticks” in place. For eg:

Thanks for visiting!

Leave a comment