Project 6: Sticky Header + Fixed Nav

Project 6: Sticky Header + Fixed Nav

A header that sticks while reading and two nav buttons that float.

Sticky header

.site-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Sticky means the header scrolls with the page until you reach its sticky point - the top.

A fixed call-to-action

.help-bubble {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 999px;
}

Fixed elements attach to the viewport and never move.

Contrast + relative

• position: relative still works as a new containing point; modals and tooltips use it to anchor inside. Use it for elements that glue others.
• z-index decides who overlaps: an app-level sticky header usually outranks low-background divs.

Your mission

1. A header that stays on top when you scroll.
2. A "Help" bubble fixed to the bottom-right.
3. Dropdown or modal anchored to a relative parent.

Checklist

• [ ] Sticky header with the correct key
• [ ] Fixed help bubble
• [ ] Z-index stacking is sensible (header above stuff)
• [ ] Nothing overlaps unintentionally

TL;DR

sticky = scroll with page, then pin; fixed = glued to the viewport; z-index orders overlaps.