Hackforge Academy

Explanation

The position property controls how an element is placed within a webpage. Common values are static, relative, absolute, fixed, and sticky.

Code:

.box {
  position: relative;
}

Explanation

Relative positioning moves an element from its normal position while keeping its original space in the layout.

Code:

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

Explanation

Absolute positioning places an element relative to its nearest positioned ancestor.

Code:

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

Explanation

Fixed positioning keeps an element in the same location even when the page is scrolled.

Code:

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

Explanation

Sticky positioning behaves like relative positioning until a specified scroll position is reached, after which it sticks in place.

Code:

.menu {
  position: sticky;
  top: 0;
}