CSS & Styling

Hoe werken position, top, bottom, left, right?

Position bepaalt hoe elementen zich positioneren relatief tot hun omgeving.

Home/Categorieën/CSS & Styling/Hoe werken position, top, bottom, left, right?

Position types

static (standaard): normale documentflow relative: relatief tot normale positie absolute: relatief tot positioned parent fixed: relatief tot viewport (blijft bij scrollen) sticky: hybride van relative en fixed

top, bottom, left, right

Deze properties werken ALLEEN als position NOT static is. Ze bepalen offset van normaal.

Code Voorbeelden

CSSAlle position types
/* Static - standdaar, ignore top/bottom/left/right */
.static { position: static; }

/* Relative - relatief tot originale plek */
.relative {
  position: relative;
  top: 10px;      /* 10px naar beneden */
  left: 20px;     /* 20px naar rechts */
}

/* Absolute - relatief tot positioned parent */
.parent { position: relative; }
.absolute {
  position: absolute;
  top: 0;
  right: 0;       /* Naar rechts-bovenkant parent */
}

/* Fixed - blijft op plaats bij scrollen */
.fixed {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;  /* Boven alles */
}

/* Sticky - toggle tussen relative/fixed */
.sticky {
  position: sticky;
  top: 0;  /* Sticky aan top */
}

💡 Praktijk Tips

z-index alleen werkt op positioned elements (niet static). Misbruik absolute positioning niet - Flexbox/Grid zijn meestal beter.

Relevante trefwoorden

positionabsolutefixedrelative
← Terug naar CSS & StylingAlle categorieën →