Hackforge Academy

Explanation

position: absolute removes an element from the normal document flow and positions it relative to a positioned ancestor.

Code:

.container {
  position: relative;
}

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

Explanation

If no positioned ancestor exists, an absolutely positioned element is generally positioned relative to the initial containing block.

Code:

.box {
  position: absolute;
  top: 0;
  left: 0;
}

Explanation

Absolute positioning is useful for badges, overlays, icons, and elements that need precise placement inside a container.

Code:

.card {
  position: relative;
}

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

Explanation

position: fixed positions an element relative to the viewport and keeps it in place while the page scrolls.

Code:

.chat-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Explanation

Fixed positioning is commonly used for floating action buttons, chat buttons, and fixed navigation elements.

Code:

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