CSS Position Property

The position property controls how an element is placed on the page. Types include:

• static – default position, follows normal flow
• relative – positioned relative to its normal position
• absolute – positioned relative to the nearest positioned ancestor
• fixed – stays fixed relative to the viewport
• sticky – behaves like relative until a scroll threshold is reached, then it sticks

Example:

<style>
.parent {
  position: relative;
  background: lightgray;
  height: 200px;
}
.child {
  position: absolute;
  top: 50px;
  right: 20px;
  background: coral;
  padding: 10px;
}
</style>

<div class="parent">
  Parent Div
  <div class="child">Absolutely Positioned Box</div>
</div>

Practice Task:
Create a sticky navigation bar that stays at the top when you scroll.