HTML en CSS leren: position, relative en absolute

Relative en absolute

In het parochiehuis hangt aan elke tafel een etiket: "Vol" of "Nieuw". Op de website staat het boven de titel, alsof het erbij hoort. Walter wil het in de hoek, zoals een echt etiket.

Een element verplaatsen

Met position: relative schuif je een element op vanaf zijn eigen plaats, met top, right, bottom of left. Zijn oude plaats blijft vrij: de rest van de pagina merkt er niets van.

Met position: absolute haal je een element uit de stroom, en de rest schuift op alsof het er niet is. Het staat dan ten opzichte van de dichtstbijzijnde voorouder met een position. Daarom krijgt de ouder bijna altijd position: relative, zonder verder iets te verschuiven.

Op de pagina staan de etiketten nu rechtsboven in hun tafel, 10px van de rand.

style.css

1.tafel {2  position: relative;3}4.etiket {5  position: absolute;6  top: 10px;7  right: 10px;8}

repaircafe.example

Probeer het zelf

Laat de etiketten boven de rand van hun tafel uitsteken: 10px boven de bovenkant, 12px van de linkerkant.

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

Een element verplaatsen

Met position: relative schuif je een element op vanaf zijn eigen plaats, met top, right, bottom of left. Zijn oude plaats blijft vrij: de rest van de pagina merkt er niets van.

Op de pagina staan de etiketten nu rechtsboven in hun tafel, 10px van de rand.

style.css

1.tafel {2  position: relative;3}4.etiket {5  position: absolute;6  top: 10px;7  right: 10px;8}

repaircafe.example

Probeer het zelf

Laat de etiketten boven de rand van hun tafel uitsteken: 10px boven de bovenkant, 12px van de linkerkant.

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