Skip to main content

Position Property in CSS Positioning (Live Playground)

The position property is a crucial aspect of CSS positioning, allowing you to control the placement of elements relative to their context. In this tutorial, you will learn about the position property, its various values, and how to position elements relative to their context, along with sample code and simple explanations.

Position value: static​

The default value for the position property is static, which means the element follows the normal flow of the document.

Example:

CSS
.static {
  position: static;
  background-color: lightblue;
}
HTML
<div class="static">This element has a static position.</div>

In this example, the element with the static position follows the normal flow of the document.

Live Playground, Try it Yourself

Position value: relative​

The relative value positions an element relative to its normal position in the document flow, without affecting the position of other elements.

Example:

CSS
.relative {
  position: relative;
  background-color: lightblue;
  top: 20px;
  left: 50px;
}
HTML
<div class="relative">This element has a relative position.</div>

In this example, the element with the relative position is moved 20px down and 50px to the right, but it doesn't affect the position of other elements.

Live Playground, Try it Yourself

Position value: absolute​

The absolute value positions an element relative to its nearest positioned ancestor or the initial containing block if no positioned ancestors are found. This value removes the element from the normal document flow.

Example:

CSS
.parent {
  position: relative;
}

.absolute {
  position: absolute;
  background-color: lightblue;
  top: 20px;
  left: 50px;
}
HTML
<div class="parent">
  This is the parent element.
  <div class="absolute">This element has an absolute position.</div>
</div>

In this example, the element with the absolute position is positioned relative to the nearest positioned ancestor, the parent element.

Live Playground, Try it Yourself

Position value: fixed​

The fixed value positions an element relative to the browser window, making it stay in the same position even when the page is scrolled.

Example:

CSS
.fixed {
  position: fixed;
  background-color: lightblue;
  top: 20px;
  left: 50px;
}
HTML
<div class="fixed">This element has a fixed position.</div>

In this example, the element with the fixed position stays in the same position relative to the browser window even when the page is scrolled.

Live Playground, Try it Yourself

Position value: sticky​

The sticky value positions an element based on the user's scroll position, acting like a combination of relative and fixed.

Example:

CSS
.sticky {
  position: sticky;
  background-color: lightblue;
  top: 20px;
}
HTML
<div class="sticky">This element has a sticky position.</div>

In this example, the element with the sticky position initially behaves like a relatively positioned element. When the user scrolls and the element's position reaches the specified top value, the element starts behaving like a fixed position element, sticking to the top of the viewport as the user continues to scroll.

Live Playground, Try it Yourself

Conclusion​

In this tutorial, you learned about the position property in CSS positioning, its various values, and how to position elements relative to their context. By understanding the role of the position property in positioning, you can create more visually appealing and responsive designs across your web pages.