Positioning

The position property determines the positioning method of HTML elements on a web page.

Static Positioning

static is the default method for all elements. If no position is specified, elements will be arranged in the normal document flow.

Copy
.box {
  position: static;
}

Relative Positioning

relative moves an element relative to its normal position. For example, the following CSS moves the element with the box class 20px to the left and 10px up.

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

Absolute Positioning

absolute positions an element relative to the nearest positioned ancestor (i.e., the nearest ancestor that is not position: static). If no such ancestor exists, it will be positioned relative to the initial containing block (often the document body).

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

Fixed Positioning

fixed positions an element relative to the browser window, so it stays in the same place even if the page is scrolled. This is commonly used for floating buttons or navigation bars.

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

Sticky Positioning

sticky toggles between relative and fixed, depending on the scroll position. It is frequently used to keep headers, sidebars, and other elements in view while scrolling.

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

Follow the emphasized points in the code to try it out yourself.