HTML en CSS leren: position sticky en fixed, en z-index

Sticky, fixed en z-index

De website van het repaircafé is lang. Wie naar beneden scrolt, verliest het menu uit het oog, en Walter wil dat de knop om je toestel aan te melden altijd in beeld blijft.

Blijven staan tijdens het scrollen

position: sticky laat een element gewoon in de stroom staan, tot het bij het scrollen de rand bereikt die je met top geeft. Dan blijft het daar plakken, zolang zijn ouder in beeld is. Ideaal voor een kop of een menu.

position: fixed haalt een element uit de stroom en zet het vast ten opzichte van het scherm: het scrolt nooit mee. Denk aan een knop rechtsonder.

Liggen elementen over elkaar, dan bepaalt z-index wie bovenaan ligt: het hoogste getal wint. Het werkt bij elementen met een position en bij flex- en grid-items.

Scrol in de pagina: de kop blijft bovenaan plakken en de knop blijft rechtsonder.

style.css

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

repaircafe.example

Probeer het zelf

Zet de knop "Meld je toestel aan" vast rechtsonder in het scherm, 16px van de onderkant en de rechterkant.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</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>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Blijven staan tijdens het scrollen

position: fixed haalt een element uit de stroom en zet het vast ten opzichte van het scherm: het scrolt nooit mee. Denk aan een knop rechtsonder.

Liggen elementen over elkaar, dan bepaalt z-index wie bovenaan ligt: het hoogste getal wint. Het werkt bij elementen met een position en bij flex- en grid-items.

Scrol in de pagina: de kop blijft bovenaan plakken en de knop blijft rechtsonder.

style.css

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

repaircafe.example

Probeer het zelf

Zet de knop "Meld je toestel aan" vast rechtsonder in het scherm, 16px van de onderkant en de rechterkant.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</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>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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