Hackforge Academy

Explanation

position: static is the default positioning mode for HTML elements. The element follows the normal document flow.

Code:

.box {
  position: static;
}

Explanation

Top, left, right, and bottom properties do not move an element when position is static.

Code:

.box {
  position: static;
  top: 50px;
  left: 50px;
}

/* top and left have no effect */

Explanation

position: relative keeps the element in the normal document flow but allows it to be visually moved.

Code:

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

Explanation

The original space occupied by a relatively positioned element remains reserved in the document layout.

Code:

.box1 {
  position: relative;
  top: 30px;
}

.box2 {
  /* Layout still considers box1's original position */
}

Explanation

Relative positioning is often used as the reference point for absolutely positioned child elements.

Code:

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}