CSS: positioning

Wat is CSS Positioning?

CSS positioning bepaalt hoe elementen op een webpagina worden geplaatst en hoe ze zich verhouden tot andere elementen. Het position property controleert het positionering schema van een element, terwijl eigenschappen zoals top, right, bottom, en left de exacte positie bepalen.

static (standaard)

Elementen volgen de normale document flow:

.element {
  position: static; /* Standaard waarde */
  /* top, right, bottom, left hebben geen effect */
}

relative

Element wordt gepositioneerd relatief ten opzichte van zijn normale positie:

.element {
  position: relative;
  top: 10px;    /* 10px naar beneden van normale positie */
  left: 20px;   /* 20px naar rechts van normale positie */
  z-index: 1;   /* Kan z-index gebruiken */
}

Kenmerken:

• Behoudt zijn plaats in de document flow
• Andere elementen gedragen zich alsof het element nog op zijn oorspronkelijke positie staat
• Creëert een nieuwe positioning context voor absolute child elementen
• Kan z-index gebruiken

absolute

Element wordt uit de normale flow gehaald en gepositioneerd relatief ten opzichte van de parent die position: relative heeft (indien deze niet aanwezig is dan wordt html als de parent gezien):

.parent {
  position: relative; /* Positioning context */
}

.child {
  position: absolute;
  top: 0;      /* Relatief tot parent */
  right: 0;    /* Rechtsboven in parent */
  width: 100px;
  height: 100px;
}

Kenmerken:

• Verlaat de document flow volledig
• Andere elementen gedragen zich alsof het element niet bestaat
• Positioneert relatief tot de nearest positioned ancestor (niet-static)
• Als er geen positioned ancestor is, positioneert het relatief tot de initial containing block
• Kan z-index gebruiken

fixed

Element wordt gepositioneerd relatief tot de viewport:

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: white;
  z-index: 1000;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
}

Kenmerken:

• Verlaat de document flow
• Blijft altijd op dezelfde positie tijdens scrollen
• Positioneert relatief tot de viewport
• Creëert een nieuwe stacking context
• Kan z-index gebruiken

sticky

Mix tussen relative en fixed positioning:

.sticky-nav {
  position: sticky;
  top: 0;           /* Blijft plakken aan top van viewport */
  background: white;
  z-index: 100;
}

.sidebar {
  position: sticky;
  top: 20px;        /* 20px van top wanneer sticky */
  height: fit-content;
}

Kenmerken:

• Gedraagt zich als relative tot het een waarde (meestal een top waarde) bereikt
• Wordt dan fixed tot de parent container uit beeld verdwijnt
• Blijft binnen de grenzen van zijn parent container
• Heeft een waarde nodig (top, bottom, left, of right)

Positioning Properties

top, right, bottom, left

Bepalen de offset van een positioned element:

.positioned {
  position: absolute;
  
  /* Verschillende manieren van positionering */
  top: 50px;        /* 50px van bovenkant */
  right: 10%;       /* 10% van rechterkant */
  bottom: 0;        /* Tegen onderkant */
  left: auto;       /* Automatisch berekend */
}

/* Centering met positioning */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

z-index

Controleert de stacking order (welk element voor/achter staat):

.background {
  position: relative;
  z-index: 1;
}

.modal-backdrop {
  position: fixed;
  z-index: 1000;
}

.modal {
  position: fixed;
  z-index: 1001;  /* Boven backdrop */
}

.tooltip {
  position: absolute;
  z-index: 9999;  /* Boven alles */
}

Z-index regels:

• Werkt alleen op positioned elementen (niet static)
• Hogere waarde = meer naar voren
• Negatieve waarden zijn toegestaan
• Auto is standaard waarde