jul25 2011

Written by: Wouter Mesker in de categorie  Algemeen, css

title

Zonder twijfel, is de het positioneren van een de een van de meest gebruikte css eigenschappen. Echter een div kan je op verschillende manieren positioneren. In deze korte tutorial het verschil tussen alle verschillen manieren van positioneren.

Ten eerste, wat is positionering?
Wanneer uw browser een webpagina opend, begint het renderen van de elementen (Div-elementen,tabellen, alinea’s, koppen enz.) in de volgorde waarin ze in de HTML-opmaak van de pagina staan. Positionering is een natuurlijke manier van het organiseren van hoe de elementen worden weergegeven en een makkelijke oplossing voor situaties zoals overlappingen. Er zijn vijf types van de positionering: statisch, relatieve(handig voor centeren), absolute, en vaste.

Standaard zijn Elementen statisch gepositioneerd.
De standaard positie, die impliciet wordt toegepast op elk element op de pagina, is statisch. Statische positionering betekent dat elk element is gepositioneerd in de volgorde waaarin deze is toegevoegd aan de pagina.

Relatieve positionering
Met deze functie kan je de plaats van je element aangeven ten opzicht van een punt (hoogte breedte) deze kan je instellen vanaf een punt.
Dit punt kan zijn (top,left,right,bottom).
vb:

1
2
3
4
5
6
7
8
9
10
.relativeDiv{
/*
verplaats de div naar top-left en daar 
een bepaalde afstand vandaan.
*/
 
   position:relative;
   top:-50px;
   left:-100px;
}

Fixed Positionering
Door de css eigenschap position:fixed toe de voegen aan de eigenschappen van het element, zal het element op dat punt vast staan (ten opzichte van de randen van de browser. Deze css eiegenschap wordt vaak gebruikt om toolbars, buttons of navigation menus vast te positioneren op een scroll pagina.
vb:

1
2
3
4
5
6
7
8
9
10
.fixedDiv{
 
/*
Zet de div aan de onderkant van u browser vast 20px van rechts.
*/
 
   position:fixed;
   right:20px;
   bottom:0px;
}

Let op hele oude browsers ondersteunen deze manier van positioneren niet.

Absolute positionering
Absolute positionering is de positionering van een element ten opzichte van het document, of een moeder element (element waar de huidige div in gepositioneerd is) . Net als bij de Fixed positionering gebruik je ook weer de eiegenschappen left,right,top en bottom.

1
2
3
4
5
6
/*
Zet de div aan de onderkant van u document vast 20px van rechts.
*/
   position:absolute;
   bottom:0px;
   left:0px;

Div in het midden positioneren
Een veel besproken onderwerp is het positioneren van een div in het midden van de pagina.

1
2
3
4
5
div#pageHolder 
{
    margin: auto;
    width: 990px;
}

Reacties
  1. Johnk479 zegt:

    1000s of Show Gambler, since the Lastly associated with Sept .. ekkaegeaaeed

    • Adan zegt:

      Ik ben op zoek naar een oud model karaf voor 500 cl met een hertenkop met gewei erin gespret, zijn deze karaffen nog te koop? Zo ja, weet u dan waar ik het kan kopen?

    • Door op 24 mei 2012 om 10:42 Nee hoor, dit is gewoon een formulier plugin (hoe je dat ook noemt). Wij gebruiken Gravity forms, verreweg de beste plugin daarvoor. De plugin kost wel geld, in het geval van het betaal ik de licentiekosten (dat is het voordeel in dit geval).  

  2. Anna zegt:

    Czekam na kontynuacje

Reply