Learn HTML and CSS: position sticky and fixed, and z-index

Sticky, fixed and z-index

The repair café's website is long. Whoever scrolls down loses sight of the menu, and Walter wants the button to sign up your device to stay in view all the time.

Staying put while you scroll

position: sticky leaves an element in the flow as usual, until scrolling brings it to the edge you give with top. Then it sticks there, as long as its parent is in view. Ideal for a header or a menu.

position: fixed takes an element out of the flow and fixes it to the screen: it never scrolls along. Think of a button in the bottom right corner.

When elements overlap, z-index decides which one is on top: the highest number wins. It works on elements with a position and on flex and grid items.

Scroll in the page: the header sticks to the top and the button stays bottom right.

style.css

1header {2  position: sticky;3  top: 0;4  z-index: 10;5}6.button {7  position: fixed;8  right: 16px;9  bottom: 16px;10}

repaircafe.example

Try it yourself

Fix the "Sign up your device" button to the bottom right of the screen, 16px from the bottom and the right side.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Broken? Not Today!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="benches.html">Benches</a>15      <a href="dates.html">Dates</a>16      <a href="sign-up.html">Sign up</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Every first Saturday of the month at the parish hall in Dorchester. Bring your broken things: we fix them together.</p>21    <a class="button" href="sign-up.html">Sign up your device</a>22    <section class="benches">23      <article class="bench bike">24        <span class="tag">Full</span>25        <h2>Bikes</h2>26        <p>A flat tyre or a weak brake? Jeff and Mark will help you.</p>27      </article>28      <article class="bench electrics">29        <h2>Electrics</h2>30        <p>Lamps, toasters and coffee machines.</p>31      </article>32      <article class="bench sewing">33        <span class="tag">New</span>34        <h2>Sewing corner</h2>35        <p>A loose seam or a broken zip.</p>36      </article>37      <article class="bench computer">38        <h2>Computers</h2>39        <p>A slow laptop or a cracked screen.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parish hall, 12 Church Street, Dorchester DT1 1JG</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Staying put while you scroll

position: fixed takes an element out of the flow and fixes it to the screen: it never scrolls along. Think of a button in the bottom right corner.

When elements overlap, z-index decides which one is on top: the highest number wins. It works on elements with a position and on flex and grid items.

Scroll in the page: the header sticks to the top and the button stays bottom right.

style.css

1header {2  position: sticky;3  top: 0;4  z-index: 10;5}6.button {7  position: fixed;8  right: 16px;9  bottom: 16px;10}

repaircafe.example

Try it yourself

Fix the "Sign up your device" button to the bottom right of the screen, 16px from the bottom and the right side.

1/* Your CSS goes here. */

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Broken? Not Today!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="benches.html">Benches</a>15      <a href="dates.html">Dates</a>16      <a href="sign-up.html">Sign up</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Every first Saturday of the month at the parish hall in Dorchester. Bring your broken things: we fix them together.</p>21    <a class="button" href="sign-up.html">Sign up your device</a>22    <section class="benches">23      <article class="bench bike">24        <span class="tag">Full</span>25        <h2>Bikes</h2>26        <p>A flat tyre or a weak brake? Jeff and Mark will help you.</p>27      </article>28      <article class="bench electrics">29        <h2>Electrics</h2>30        <p>Lamps, toasters and coffee machines.</p>31      </article>32      <article class="bench sewing">33        <span class="tag">New</span>34        <h2>Sewing corner</h2>35        <p>A loose seam or a broken zip.</p>36      </article>37      <article class="bench computer">38        <h2>Computers</h2>39        <p>A slow laptop or a cracked screen.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parish hall, 12 Church Street, Dorchester DT1 1JG</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example