Home / CSS-track / Les 5

📐 Display & positie

Les 5 van 12 · ~25 min · CSS-track

Stap 1 van 7

display bepaalt hoe een element in de flow staat. position bepaalt waar het letterlijk op de pagina staat. Samen geven ze je volledige controle over de lay-out — van knopjes naast elkaar tot een sticky navigatiebalk.

display: block, inline en inline-block

Elk element heeft een standaard display-waarde. Je kunt die altijd overschrijven.

block — standaard: div, p, h1–h6, section…

Neemt de volledige breedte in, begint altijd op een nieuwe regel. Reageert op width, height, margin en padding.

Block 1 (neemt volledige breedte)

Block 2 (nieuwe regel)

inline — standaard: span, a, strong, em…

Past zich aan de content-breedte aan, staat naast andere elementen in de tekststroom. Width/height hebben geen effect.

Tekst met inline 1 en inline 2 in de flow.

inline-block — beste van beide werelden

Staat naast andere elementen (inline), maar reageert wél op width, height, padding en margin (block). Handig voor knoppen.

Knop 1 Knop 2 Knop 3

none

Verbergt het element volledig — het neemt geen ruimte in (anders dan visibility: hidden dat wel ruimte behoudt).

position: static & relative

Met position + top/right/bottom/left stuur je elementen uit de normale flow.

static — standaard

Volgt de normale documentflow. top/left etc. hebben geen effect. Je hoeft dit nooit expliciet te zetten.

relative

Verplaatst het element ten opzichte van zijn eigen normale positie. De ruimte die het origineel innam blijft gereserveerd.

.badge {
  position: relative;
  top: -4px;    /* 4px omhoog tov normale positie */
  left: 8px;    /* 8px naar rechts */
}

Meest gebruikt als anker voor absolute children (zie volgende stap).

position: absolute, fixed & sticky

absolute

Wordt uit de normale flow gehaald. Positie is ten opzichte van de dichtstbijzijnde ancestor met position ≠ static. Als er geen is: het viewport.

.parent {
  position: relative; /* anker */
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  /* staat rechtsboven in .parent */
}

fixed

Zoals absolute, maar altijd ten opzichte van het viewport. Scrollt niet mee. Ideaal voor navigatiebalken en chat-knoppen.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

sticky

Gedraagt zich als relative totdat het de opgegeven drempel bereikt bij het scrollen — dan "plakt" het vast als fixed. De beste keuze voor section-headers.

.section-header {
  position: sticky;
  top: 0;           /* plakt aan top bij scrollen */
  background: white;
  z-index: 10;
}

z-index: de stapelvolgorde

Wanneer elementen overlappen, bepaalt z-index wat bovenop staat. Hogere waarde = verder naar voren.

.modal-backdrop {
  position: fixed;
  z-index: 100;
}
.modal {
  position: fixed;
  z-index: 101;   /* modal staat vóór backdrop */
}
.tooltip {
  position: absolute;
  z-index: 200;   /* tooltips altijd bovenop */
}

Belangrijke regels

z-index werkt alleen op elementen met position ≠ static
Gebruik zo weinig mogelijk waarden en houd een vaste schaal aan (10, 20, 100…)
Stacking contexts: een element met transform of opacity < 1 maakt een nieuwe context — z-index hiervan werkt niet buiten die context

z-index: 1

z-index: 2

z-index: 3

Overzicht: wanneer gebruik je wat?

Situatie	Oplossing
Knoppen naast elkaar	display: inline-block of flexbox
Element verbergen	display: none
Badge/label op kaart	parent: relative · badge: absolute
Sticky navigatiebalk	position: sticky; top: 0
Vaste chatknop rechtsonder	position: fixed; bottom: 24px; right: 24px
Modal/overlay	position: fixed; inset: 0; z-index: 100
Tooltip boven element	parent: relative · tooltip: absolute

Tip: voor moderne lay-outs (naast-elkaar, rijen/kolommen) gebruik je bijna altijd Flexbox of Grid in plaats van inline-block. Die leer je in les 6 en 7.

Oefening 1 – Badge op kaart

Maak een productkaart met een "Nieuw"-badge rechtsboven:
• .kaart: position relative, display inline-block, border 2px solid #374151, border-radius 12px, padding 20px, background #1f2937
• .badge: position absolute, top 12px, right 12px, background #10b981, kleur wit, font-size 11px, padding 2px 8px, border-radius 20px
• h3: margin 0 0 8px 0, kleur wit
• p: margin 0, kleur #9ca3af, font-size 14px

CSS

HTML

<div class="kaart">
  <span class="badge">Nieuw</span>
  <h3>Product naam</h3>
  <p>Korte omschrijving
  van het product.</p>
</div>

Live voorbeeld

Oefening 2 – Sticky header + fixed knop

Bouw een pagina met sticky header en vaste actieknop:
• body: margin 0, font-family sans-serif, background #f9fafb
• header: position sticky, top 0, background #1e40af, kleur wit, padding 12px 24px, z-index 10
• .inhoud: padding 24px, kleur #111827
• .fab (floating action button): position fixed, bottom 24px, right 24px, background #10b981, kleur wit, width 56px, height 56px, border-radius 50%, border none, font-size 24px, cursor pointer

CSS

HTML

<header>Mijn Site</header>
<div class="inhoud">
  <h1>Welkom!</h1>
  <p>Content hier...</p>
</div>
<button class="fab">+</button>

Live voorbeeld

Quiz

📐

Les 5 afgerond!

Je beheerst display en positie — de bouwstenen van elke lay-out. Volgende stap: Flexbox!

Volgende: Flexbox →

← Het box model Flexbox →