Hackforge Academy

Explanation

position: sticky behaves like relative positioning until a specified scroll threshold is reached, after which it sticks within its scrolling context.

Code:

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

Explanation

A sticky element requires an offset such as top, bottom, left, or right to define when it should stick.

Code:

.menu {
  position: sticky;
  top: 10px;
}

Explanation

z-index controls the stacking order of positioned elements when they overlap.

Code:

.modal {
  position: fixed;
  z-index: 1000;
}

Explanation

An element with a higher applicable stacking order can appear above another overlapping element.

Code:

.header {
  position: fixed;
  z-index: 100;
}

.dropdown {
  position: absolute;
  z-index: 200;
}

Explanation

A common UI layering pattern is to place overlays above content and dialogs above overlays.

Code:

Content      z-index: 1
Overlay      z-index: 100
Modal        z-index: 1000
Tooltip      z-index: 1100