Allereerst gaan we ons verdiepen over de kenmerken van elk element. Dit is heel belangrijk om dit voor ogen te houden wanneer je breedte en hoogtes insteld, alsook margin en padding toevoegt in de opmaak.

  1. Een block element zal na het element automatisch een nieuwe lijn beginnen, alsof er een 'enter' achter is geplaatst. Het houdt ook rekening met de marges en de padding van het element.
    Standaard: article, header, aside, hgroup, blockquote, body, canvas, caption, col, colgroup, dd, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, h*, header, hgroup, hr, li map, object, ol, output, p, pre, projgress, section, table, tbody, textarea, tfoot, th, thead, tr, ul , video.
  2. Inline elementen plaatsen zichzelf naast elkaar in de rij. Er kan geen hoogte en breedte op ingesteld worden. De ingestelde linker en rechter marges (+padding) worden gerespecteerd, maar de boven en onder marges (+padding) worden genegeerd.
    Standaard: b, big, i, small, tt, abbr, acronym, cite, code, dfn, em kbd, strong, samp, var, a, bdo, br, img, map, object, q, script, span, sub, sup, button, input, label, select, textarea.
  3. Standaard bestaan er geen inline-block elementen, al wordt deze handige eigenschap wel vaak aan elementen toegekend via display: inline-block. Voorbeeld is onze navigatie die we via li { display: inline-block; } naast elkaar plaatsen.

Door een andere waarde aan de positie eigenschap toe te kennen kunnen we een element uit de flow gaan halen. Dit kan op 4 verschillende manieren static (standaard), absolute, relative en fixed.

  1. Position: Static is de standaard waarde en gaat onder de noemer niet gepositioneerd.
  2. Position: Relative gedraagt zich hetzelfde als static tenzij je nog een aantal extra eigenschappen opneemt. Het zetten van de top, right, bottom, en left properties zal ervoor zorgen dat de positie aangepast wordt ten opzichte van zijn originele positie.
    .relative1 {
    position: relative;
    }
    .relative2 {
    position: relative;
    top: -20px;
    left: 20px;
    background-color: white;
    width: 500px;
    }
    		
  3. Position: absolute gedraagt zich net als fixed behalve deze relatief tot de dichtsbij zijnde gepositioneerde voorouder element. Als het element geen voorouders heeft, dan wordt de document body gebruikt en zal het mee scrollen met de pagina.
    .relative {
    position: relative;
    width: 600px;
    height: 400px;
    }
    .absolute {
    position: absolute;
    top: 120px;
    right: 0;
    width: 300px;
    height: 200px;
    }
    		
  4. Position: fixed Vast positioneren tegenover browser canvas, los van de flow. Dit wordt heel veel met de navigatie gedaan. Een fixed element laat geen ruimte achter in de pagina waar het normaal gesproken zou hebben gestaan.
    Pas wel op met de mobiele browser, dit is vaak wankel met de fixed eigenschap.
    .navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    }
    .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    }
    		
    Bekijk het voorbeeldje op w3schools.

De z-index positioneert een element los van de flow, als een laag boven of onder een ander element = laagvolgorde . Dit werkt alleen bij de elementen met positon: fixed, relative en absolute. Een element met een hogere z-index zal hoger geplaatst worden op het canvas. De z-index gaat van -9999 tot 9999.

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Bekijk het voorbeeldje op w3schools.

Overflow in CSS is een eigenschap waarmee je kunt instellen wat er moet gebeuren als bepaalde content langer wordt dan een aangegeven breedte of hoogte. Stel dat je met een div een tekstvak hebt gemaakt met een hoogte van 200 pixels. Zodra je dan tekst gaat plaatsen en dit past niet in het blok dan zal de div niet automatisch mee gaan schalen en loopt de tekst het het blok uit. Om dit effect nu te voorkomen kan overflow worden gebruikt.

Waarden bij de eigenschap overflow:

  1. scroll : Altijd een schuifbalk.
  2. auto: Schuifbalk als de tekst te lang is.
  3. hidden: Alles langer of breder dan aangegeven wordt niet getoond.
  4. visible (standaard): Langere of bredere content tonen

Bekijk het voorbeeld op w3schools.com.

Overflow:auto wordt vaak mij de ID-selector opgeroepen waar de inhoud in de hoogte moet meeschalen.

#content {
margin: 0 auto;
border: 1px solid red;
width:800px;
overflow:auto;
}

Overflow:hidden wordt vaak mij de body opgeroepen om ervoor te zorgen dat je geen scroll te zien krijgt in de hoogte.

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}