An Article on CSS Position and its Properties...

The CSS position property is used to set position for an element. it is also used to place an element behind another and also useful for scripted animation effect.

You can position an element using the top, bottom, left and right properties. These properties can be used only after position property is set first. A position element's computed position property is relative, absolute, fixed or sticky.

Basically CSS Position has 5 Properties.

• Static Positioning
• Relative Positioning
• Absolute Positioning
• Fixed Positioning
• Sticky Positioning

CSS Static Positioning

This is a by default position for HTML elements. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.

CSS Relative Positioning

The relative positioning property is used to set the element relative to its normal position. It will affected by the top, bottom, left and right properties.

Here in this example when we gave item #two position to relative and top: 50px; , left: 50px;, it moves from its original position only towards the given property.

CSS Absolute Positioning

The absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML.

With the absolute positioning, you can place an element anywhere on a page.

CSS Fixed Positioning

The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.

It is mostly used like "Chat Now" button in the Web Page.

CSS Sticky Positioning

The element is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

It is mostly used in a nav bar of the Web Page.

Thank You for Reading...