Positions in CSS

Static

• This is the default position for all elements. They are positioned according to the normal flow of the page.

• Use this when you don’t need to adjust the position of an element. It simply stays where it is.

• Example use case: A paragraph of text on a webpage.

Relative

• Position relative to itself: An element with position: relative is positioned relative to its normal position. You can use top, bottom, left, and right to adjust it.

• Use this when:

• You want to move an element slightly from its normal position without affecting other elements around it.

• You have an element inside another element and you want the inner element (child) to be positioned specifically within the outer element (parent), you set the parent to position: relative and the child to position: absolute. This makes the child position itself relative to the parent, not the entire page.

• Example use case 1: Suppose you have a block of text, and you want to move a small image 10 pixels to the right of where it normally appears.

<p>This is some text with an <img src="image.jpg" style="position: relative; left: 10px;"> image that is nudged to the right.</p>

Without relative, the image would appear in its default place according to the page layout. With position: relative; left: 10px;, the image moves 10 pixels to the right, but other elements around it remain unaffected and stay in their original positions.

• Example use case 2: Imagine you have a container (div) and you want to position a caption (span) exactly at the bottom-right corner of that container.

<div style="position: relative; width: 300px; height: 200px; background-color: lightgray;">
  <img src="image.jpg" style="width: 100%; height: auto;">
  <span style="position: absolute; bottom: 10px; right: 10px;">Caption</span>
</div>

The div is given position: relative;—this means it stays in the normal flow of the document but now serves as a reference for any absolutely positioned children.

The span inside the div is given position: absolute; and is positioned at the bottom-right corner of the div (10px away from both the bottom and right edges of the div).

Absolute

• Position relative to the nearest positioned ancestor: An element with position: absolute is removed from the normal flow and positioned relative to its nearest positioned ancestor (an ancestor with relative, absolute, or fixed positioning). If there is no such ancestor, it positions itself relative to the element.

• Use this to place an element at an exact position inside a container.

• Example use case: Placing a caption in the bottom-right corner of an image container.

Fixed

• Position relative to the viewport: An element with position: fixed is positioned relative to the browser window, so it stays in the same place even when the page is scrolled.

• Use this for elements that should always be visible, like a sticky navigation bar or a floating button.

• Example use case: A navigation bar that stays at the top of the page as you scroll down.

Sticky

• Behaves like relative until a certain scroll position is reached, then acts like fixed: An element with position: sticky is relative to the page flow until you scroll past a certain point, at which it “sticks” in place.

• Use this for elements that should scroll with the page until they reach a specific spot, such as a table header that stays visible when scrolling through the table.

• Example use case: A table header that sticks to the top of the table while you scroll through the content. A sidebar moves with the page as the user scrolls until it reaches 20px from the top of the viewport, then it sticks there and stays visible.