Wat zijn de opties voor positionering van elementen in CSS?

In CSS zijn er verschillende hoofdopties voor het positioneren van elementen:

• static — standaardpositie. Elementen worden in de stroom van het document geplaatst, zonder verschuivingen.
• relative — het element wordt gepositioneerd ten opzichte van zijn normale positie. Het kan worden verschoven met top, left, bottom, right, terwijl het zijn plek in de stroom behoudt.
• absolute — het element wordt gepositioneerd ten opzichte van de dichtstbijzijnde voorouder met een andere positie dan static (of ten opzichte van het venster als er geen is). Het element verlaat de stroom.
• fixed — het element wordt vastgezet ten opzichte van het browservenster en beweegt niet bij scrollen. Het verlaat ook de stroom.
• sticky — het element gedraagt zich als relative totdat het een bepaalde positie bereikt tijdens het scrollen, daarna als fixed.

Naast positionering worden vaak gebruikt:

• Flexbox — flexibel model voor het uitlijnen en verdelen van ruimte tussen elementen in één dimensie (rij of kolom).
• Grid — tweedimensioneel rastermodel voor het plaatsen van elementen in rijen en kolommen.
• float — verouderde methode voor het laten vloeien van elementen, vroeger gebruikt voor kolommen, nu minder vaak.

Voorbeeld van het gebruik van position:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}