CSS Positions

What is CSS Position Property?

The CSS position property is used to position an element in an HTML document. This property works in conjunction with the left, right, top, bottom and z-index properties to determine the final position of an element on a page.

Types of Positions

1. static default

2. sticky

3. absolute

4. relative

5. fixed

With position property we use top, bottom, right and left properties.

top: 10px;
bottom: 10px;
right: 10px;
left: 10px;

Static

• The default value of position property is static.

• The target element will be positioned according to the normal flow of the HTML document.

• top, bottom, left & right properties have no effect on this property.

Relative

• We can move the element by using top, bottom, left & right properties but it will keep its original position intact.

• In the below example the topmost border is its initial and we are changing the position by 10px from top, bottom, left & right.

Absolute

• The element is positioned based on its nearest parent/ancestor.

• If there is no parent then it uses document body.

• The elements with position absolute are removed from normal flow & can overlap on top of other elements.

• We use top, bottom, left & right properties to position the elements.

Fixed

• The element remains fixed.

• The elements with position absolute are removed from normal flow & can overlap on top of other elements.

• We use top, bottom, left & right properties to position the elements.

• It will be fixed even if we scroll the page.

• Typical use case: QnA chatbot at bottom right section.

Sticky

• The element remains fixed and when we scroll up it sticks to top.

• The elements with position absolute are removed from normal flow & can overlap on top of other elements.

• We use top, bottom, left & right properties to position the elements.

• Typical use case: navbar which on scroll sticks on top.

Thank You