Position fixed and sticky in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the header stay fixed at the top of the page.

CSS

header {
  position: [1];
  top: 0;
  width: 100%;
  background-color: lightblue;
}

Drag options to blanks, or click blank then click option'

Aabsolute

Bfixed

Cstatic

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' does not fix the element on scroll.

Using 'static' is the default and does not fix the element.

Using position: fixed; makes the header stay fixed at the top of the page even when you scroll.

2fill in blank

medium

Complete the code to make the sidebar stick to the top when scrolling past it.

CSS

.sidebar {
  position: [1];
  top: 0;
  background-color: lightgray;
  height: 200px;
}

Drag options to blanks, or click blank then click option'

Aabsolute

Brelative

Csticky

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' makes the element always fixed, not sticky.

Using 'absolute' positions relative to nearest positioned ancestor.

position: sticky; makes the sidebar stick to the top of the viewport when you scroll past it.

3fill in blank

hard

Fix the error in the code to make the footer fixed at the bottom of the page.

CSS

footer {
  position: [1];
  bottom: 0;
  width: 100%;
  background-color: lightgreen;
}

Drag options to blanks, or click blank then click option'

Afixed

Bsticky

Crelative

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sticky' does not fix the footer at the bottom always.

Using 'relative' or 'static' will not fix the footer position.

position: fixed; with bottom: 0; fixes the footer at the bottom of the viewport.

4fill in blank

hard

Fill both blanks to create a sticky navigation bar that sticks 10px from the top.

CSS

nav {
  position: [1];
  top: [2];
  background-color: coral;
  padding: 1rem;
}

Drag options to blanks, or click blank then click option'

Asticky

Bfixed

C10px

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' instead of 'sticky' changes behavior.

Setting top to 0 sticks at the very top, not 10px below.

Using position: sticky; with top: 10px; makes the nav bar stick 10 pixels from the top when scrolling.

5fill in blank

hard

Fill all three blanks to create a fixed header with a sticky subheader below it.

CSS

header {
  position: [1];
  top: 0;
  background-color: navy;
  color: white;
  padding: 1rem;
}
.subheader {
  position: [2];
  top: [3];
  background-color: lightblue;
  padding: 0.5rem;
}

Drag options to blanks, or click blank then click option'

Afixed

Bsticky

C3rem

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sticky' for header instead of 'fixed' makes it scroll away.

Setting subheader top to 0 causes overlap with fixed header.

The header is fixed at the top with position: fixed;. The subheader is sticky and sticks 3rem below the top, so it stays below the fixed header.