CSS Positioning: A Beginner’s Guide to Mastering the Position Property

The CSS position property is used to control the position of an element on a web page. It specifies how an element should be positioned in relation to its parent element or the viewport.

There are five possible values for the CSS position property:

Static

The static value is the default value. Elements with position: static are positioned according to the normal flow of the document.

HTML Code:

<div class="static">This is a static element</div>

CSS Code:

.static {
  position: static;
  background-color: lightgray;
  padding: 20px;
}

Relative

Elements with position: relative are positioned relative to their normal position in the document flow. You can use the top, right, bottom, and left properties to offset the element from its normal position.

HTML Code:

<div class="relative">This is a relative element</div>

CSS Code:

.relative {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: lightgray;
  padding: 20px;
}

Absolute

Elements with position: absolute are positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However, if there is no positioned ancestor, it uses the document body and moves along with page scrolling.

HTML Code:

<div class="parent">
  <div class="absolute">This is an absolute element</div>
</div>

CSS Code:

.parent {
  position: relative;
}

.absolute {
  position: absolute;
  top: 20px;
  right: 30px;
  background-color: lightgray;
  padding: 20px;
}

Fixed

Elements with position: fixed are positioned relative to the viewport and they don’t move even when the page is scrolled.

HTML Code:

<div class="fixed">This is a fixed element</div>

CSS Code:

.fixed {
  position: fixed;
  bottom: 20px;
  left: 30px;
  background-color: lightgray;
  padding: 20px;
}

Sticky

Elements with position: sticky are positioned based on the user’s scroll position. A sticky element is initially displayed as a normal element, and then it sticks to its nearest positioned ancestor as the user scrolls the page.

HTML Code:

<div class="sticky">This is a sticky element</div>

CSS Code:

.sticky {
  position: sticky;
  top: 20px;
  background-color: lightgray;
  padding: 20px;
}

Note: sticky positioning is not supported in all browsers.

CSS Position: Conclusion

the CSS position property in CSS plays a crucial role in determining the layout of a web page. By understanding the five possible values of position, namely static, relative, absolute, fixed, and sticky, web developers can effectively control the positioning of elements on a page. Whether it be a simple offset from the normal flow of the document or a fixed position relative to the viewport, the position property provides a flexible and powerful solution to positioning elements on a web page.