Positioning

The position property determines how an HTML element is positioned in a web page.

static is the default positioning for all elements.

If you don't specify a position, the elements are automatically placed in their original order.

Copy
.box {
  position: static;
}

relative moves an element relative to its original position.

For instance, the CSS box class below moves the element with the class 20px to the left and 10px up.

Copy
.box {
  position: relative;
  left: 20px;
  top: 10px;
}

absolute positions an element relative to its nearest positioned ancestor that isn't static.

If no such ancestor exists, it will be positioned relative to the body of the web page.

Copy
.box {
  position: absolute;
  top: 50px;
  right: 30px;
}

fixed keeps an element fixed in place relative to the browser window.

This is commonly used for floating buttons or navigation bars that remain visible as you scroll through a page.

Copy
.box {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

sticky allows an element to shift relative to the scroll position until it reaches a specified point, then it becomes fixed in place.

This technique is often used to keep a table header or sidebar content in view.

Copy
.box {
  position: sticky;
  top: 0;
}

Follow the highlighted portions in the code to practice.