Day 4: CSS Position & z-index

Daily Objective

Control the spatial positioning of elements and manage stacking layers using z-index.

1. The 5 Position Schemes

• static: Default browser flow.
• relative: Positioned relative to normal flow; opens positioning context for child elements.
• absolute: Removed from flow and positioned relative to nearest positioned ancestor (non-static).
• fixed: Positioned relative to the browser window; stays fixed during scrolling.
• sticky: Toggles between relative and fixed depending on scroll position.

/* Fixed Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* Badge on Card */
.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Daily Hands-on Practice (70%)

1. Build a sticky top navigation bar using position: sticky; top: 0;.
2. Create an image card with an absolute-positioned “Sale” tag in the top-right corner.