Positioning

CSS Positioning

The position property controls how an element is placed:

static (default) — normal document flow.

relative — offset from its normal position:

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

absolute — removed from flow, positioned relative to nearest non-static ancestor:

.parent { position: relative; }
.child  { position: absolute; top: 0; right: 0; }

fixed — positioned relative to the viewport, stays when scrolling:

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

sticky — relative until a scroll threshold, then fixed:

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

z-index — stacking order (higher = on top):

.modal { z-index: 100; }

Your Task

Create a container with position: relative, an absolutely-positioned child, and a sticky element using z-index.