Positionering laat je toe om elementen uit de normale layout flow te nemen, en ervoor te zorgen dat ze zich anders gedragen dan normaal. Bijvoorbeeld, dat ze boven op elkaar zitten, of altijd op dezelfde plaats in de viewport. Dit artikel overloopt de verschillende mogelijke waarden voor {{cssxref("position")}} en hoe die te gebruiken.

Documentstroom

Positionering is een behoorlijk complex onderwerkp, dus gaan we voor we in de code duiken de layout theorie herhalen en licht uitbreiden, zodat we een idee krijgen van hoe dit werkt.

Prerequisites:	Basis van HTML (bestudeer Introductie tot HTML) en een idee van Hoe CSS werkt (bestudeer Introductie tot CSS.)
Objective:	Leren hoe CSS positionering werkt.

Ten eerste worden individuele element-dozen gelayout door de inhoud van het element te nemen, dan de vulling, rand en marge toe te voegen daar rond: kort gezegd is dat het doosmodel. Standaard neemt een blok-level element 100% van de beschikbare breedte in van zijn ouderelement, en is het even hoog als de eigen inhoud. Inline elementen zijn zo hoog en zo breed als hun inhoud. Je kan de breedte en hoogte niet instellen voor inline elementen, ze zitten gewoon in de inhoud van blok-level elementen. Indien je de grootte van een inline element wil instellen, moet je maken dat het zich gedraagt als een blok-level element met display: block;.

Dit verklaart de individuele elementen, maar hoe zit het met de interactie tussen elementen? De normale layout flow (vermeld bij de inleiding van dit hoofdstuk) is het systeem volgens hetwelk de elementen binnen de viewport geplaatst worden. Standaard worden block-level elementen vertikaal uitgelegd in de viewport: elk block-level element zal op een nieuwe lijn onder het vorig element verschijnen, en ze zullen worden gescheiden door de marge die erop ingesteld wordt.

Inline elementen gedragen zich anders, ze verschijnen niet op nieuwe regels. Zij worden op dezelfde regel geplaatst als andere inline elementen en tekstinhoud, op voorwaarde dat er plaats is om dat te doen binnen de breedte van het ouderelement. Indien er geen ruimte is dan zal de overvloeiende tekst of zullen de overvloeiende elementen naar een volgende regel verhuizen.

Indien twee naast elkaar gelegen element allebei een marge hebben, en de twee marges raken elkaar, dan zal de kleinere marge verdwijnen. Dit noemen we samenvallende marges, wat we al eerder zagen.

We komen nog een aantal keer terug op dit voorbeeld naarmate we door dit hoofdstuk verder gaan, om de effecten van de verschillende positioneringsmogelijkheden aan te tonen.

We zouden graag hebben dat je met deze voorbeelden meevolgt op je lokale computer, indien mogelijk. Haal een kopie van 0_basic-flow.html af van onze Github repo (broncode hier) en gebruik dat als aanvangspunt.

Inleiding tot positionering

Het idee achter positionering is dat het ons toelaat om de algemene documentstroom, die hierboven werd uiteengezet, te overschrijven. Wat indien je de positie van sommige dozen wil wijzigen om bv. een licht rare sfeer op te wekken? Positioneren is de manier waarop je dat kan. Of wat indien je een UI element wil maken dat boven de andere delen van de pagina drijft, en/of altijd in dezelfde plaats in het browservenster zweeft ook al wordt de pagina gescrolled? Positioneren maakt dit mogelijk.

Er zijn een aantal verschillende soorten van positionering die je kan toepassen op HTML elementen. Om die in te stellen gebruiken we de {{cssxref("position")}} eigenschap.

Statische positionering

Statische positionering is de standaard voor elk element. Het betekent gewoon: "zet het element op zijn normale positie in de documentstroom, hier is niets speciaals te zien".

Om dit te illustreren, en om je voorbeeld klaar te maken voor de volgende secties, voeg je de klasse positioned toe aan het tweede {{htmlelement("p")}} in de HTML:

Als je nu opslaat en herlaad, zal je maar één verschil zien: de veranderde achtergrondkleur van de tweede paragraaf.

Relatieve positionering

Relatieve positionering is de eerste soort positie die we regelmatig zullen bekijken. Deze soort is zeer gelijkaardig aan statische positionering, behalve dat eens het element zijn normale plaats in de normal layout flow heeft ingenomen, je de uiteindelijke positie nog kan wijzigen. Zo kan je het andere elementen laten overlappen op de pagina. Probeer de positiedeclaratie te updaten in je code:

Indien je nu opslaat en herlaad, zul je geen verandering zien in het resultaat. Hoe wijzig je dan de positie van het element? Je moet de {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} eigenschappen gebruiken, welke we hierna gaan bespreken.

Kennis maken met top, bottom, left, and right

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} worden gebruikt in conjunctie met {{cssxref("position")}} om in te stellen waar het gepositioneerde element naar toe moet. Om dit uit te proberen kan je de volgende declaraties toevoegen aan de .positioned regel in je CSS:

<h1>Relative positioning</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Cool, niet? Dit was misschien niet wat je zou verwachten: waarom is het naar onder en naar rechts verschoven nadat we boven en links specifieerden? Hoe onlogisch het aanvankelijk ook mag klinken: dit is gewoon de manier waarop relatieve positionering werkt. Je moet denken aan een onzichtbare kracht die duwt tegen de zijkant van de gepositioneerde doos, waardoor die in de tegenovergestelde richting beweegt. Als je dus specifieert top: 30px;, dan duwt die kracht tegen de bovenkant van de doos waardoor die 30px naar beneden beweegt.

Absolute positionering

Absolute positionering geeft radicaal andere resultaten. Laten we proberen om de positie in onze declaratie als volgt te veranderen:

<h1>Absolute positioning</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Merk ten eerste op dat het eerste en derde element na elkaar komen alsof het tweede element niet meer bestaat! Dit klopt ook: een absoluut gepositioneerd element bestaat niet meer in de normale document layout flow. In de plaats daarvan bestaat het in een eigen laag, die los staat van alle andere elementen. Dit is zeer bruikbaar: het betekent dat we geïsoleerde UI elementen kunnen maken die niet interageren met de positie van andere elementen op de pagina. Popups, menus, enz. zijn mogelijke voorbeelden.

Merk ten tweede op dat de positie van het element veranderd is. Dit komt doordat {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} zich anders gedragen bij absolute positionering. In plaats van te specificeren in welke richting een element moet bewegen, specificeren ze de afstand die het element moet hebben van de zijde van het element waarin het vervat zit. In dit geval zeggen we dat het absoluut gepositioneerde element 30px van de bovenkant, en 30px van de linkerkant moet gepositioneerd zijn van het "vervattende" element.

Opmerking: Je kan {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} gebruiken om de grootte van elementen aan te passen indien nodig. Probeer volgende zaken in te stellen voor je gepositioneerde elementen en kijk wat er gebeurt: top: 0; bottom: 0; left: 0; right: 0; en margin: 0;. Zet die waarden nadien terug naar de originele waarden.

Positioneringscontexten

Welk element is het "vervattende element" van een absoluut gepositioneerd element? Standaard is dit het {{htmlelement("html")}} element: het gepositioneerde element is genest in de {{htmlelement("body")}} in de broncode, maar in de uiteindelijke layout is het 30px van de bovenkant en linkerkant van de rand van de pagina, en dat is het {{htmlelement("html")}} element. Dit wordt ook wel de positioneringscontext van het element genoemd.

We kunnen de positioneringscontext (ten opzichte van welk element het absolute element relatief gepositioneerd wordt) veranderen. Dit wordt gedaan door één van de voorouders van het element te positioneren, maw. één van de elementen waarin het absoluut gepositioneerde element genest is (het is onmogelijk te positioneren relatief ten opzichte van een element waarin het niet genest is). Om dit te verduidelijken, voeg je de volgende declaratie toe aan de regel voor de body:

<h1>Positioning context</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Het gepositioneerde element zit nu relatief ten opzichte van het {{htmlelement("body")}} element.

De z-index

Absolute positionering is leuk, maar er is iets anders waar we nog niet over gesproken hebben: welk element zal als bovenste worden weergegeven indien elementen overlappen? In het voorbeeld dat we tot nu toe zagen, positioneerden we slechts één element in de positioneringscontext. Dat element zal bovenaan staan, aangezien gepositioneerde elementen winnen van niet-gepositioneerde elementen. Maar wat als er meer dan één is?

Probeer het volgende toe te voegen aan je CSS, waardoor de eerste paragraaf ook absoluut gepositioneerd zal worden:

Nu zal je de eerste, groengekleurde paragraaf uit de document flow zien bewegen, en een beetje hoger gepositioneerd worden dan waar hij normaal zou staan. Hij wordt ook weergegeven onder de andere gepositioneerde paragraaf, waar de twee overlappen. Dit is omdat de andere gepositioneerde paragraaf later komt in de broncode, en gepositioneerde elementen die later in de broncode komen zullen winnen van gepositioneerde elementen die eerder in de broncode komen.

Kan je die volgorde veranderen? Jazeker, met behulp van de {{cssxref("z-index")}} eigenschap. "z-index" is een referentie naar de z-as. Je zal je misschien herinneren van eerdere punten in de uitleg waar we bespraken hoe webpagina's horizontale (x-as) en verticale (y-as) coördinaten gebruiken om de positionering te bepalen van zaken zoals achtergrondafbeeldingen en drop shadow offsets. (0,0) is linksboven aan de pagina (of aan het element), en de x- en y-assen lopen tot de rechteronderhoek van de pagina (voor talen die van links naar rechts gelezen worden).

Webpaginas hebben ook een z-as: een denkbeeldige lijn die gaat van je scherm naar je gezicht (of wat het ook is dat je voor het scherm hebt). {{cssxref("z-index")}} waarden hebben bijgevolg een effect op waar de gepositioneerde elementen op de z-as staan: positieve waarden betekenen dat het element hoger zal komen, negatieve waarden betekenen dat het element lager zal komen. Standaard hebben gepositioneerde elementen een z-index van auto, wat praktisch gezien 0 is.

Om de volgorde te veranderen, voeg je volgende declaratie toe aan de p:nth-of-type(1) regel:

<h1>z-index</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}

Bemerk dat z-index enkel eenheidsloze waarden aanvaardt. Je kan niet specificeren dat je een element 23 pixels wil laten bewegen op de z-as, zo werkt het niet. Hogere waarden gaan boven lagere waarden, en het is aan jou om te bepalen welke waarden je gebruikt. 2 en 3 gebruiken zal het zelfde effect hebben als 300 en 40000 gebruiken.

Merk ook op dat we binnen een enkele positioneringscontext bleven met ons voorbeeld. Indien je twee sets van gepositioneerde elementen zou hebben in een pagina, en je zou er voor willen zorgen dat ze overlappen en dat de volgorde volgens een bepaald patroon verloopt, dan zou het ingewikkeld worden. Gelukkig kom je zo'n complexiteit maar zelden tegen met de z-index. Als je in meer detail wil lezen hoe de z-index werkt, bekijk dan het Web Standards Curriculum z-index artikel. In dit hoofdstuk hebben we je alle informatie gegeven die je momenteel nodig hebt.

Fixed positioning

There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.

Let's put together a simple example to show what we mean. First of all, delete the existing p:nth-of-type(1) and .positioned rules from your CSS.

Now, update the body rule to remove the position: relative; declaration and add a fixed height, like so:

Now we're going to give the {{htmlelement("h1")}} element position: fixed;, and get it to sit at the top center of the viewport. Add the following rule to your CSS:

The top: 0; is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old margin: 0 auto; trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.

If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:

<h1>Fixed positioning</h1>

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">I'm not positioned any more...</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}

Experimental: position sticky

There is a new positioning value available called position: sticky, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. See our position: sticky reference entry for more details and an example.

Samenvatting

Ik ben er zeker van dat je plezier had om met de basis positionering te spelen. Het is één van de elementaire tools om complexe layouts te maken met CSS. Met dat in gedachten, zullen we in het volgende hoofdstuk nog meer plezier hebben met positionering: we gaan er een stap verder en bouwen enkele zaken die ook in de "echte wereld" nuttig zijn.

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}