
PositieCss is een zeer geschikt hulpmiddel om zaken op een bepaalde plaats te krijgen. Als je op een gegeven moment verder wil met dhtml om mooi uitziende menus te gaan maken, dan moet je de komende pagina's goed doornemen. Later heb je daar weer profijt van.
Met behulp van position kun je een element op een bepaalde plaats krijgen. Dit kan relatief geplaatst worden of absoluut. Je moet dan bedenken dat je positioneert ten opzichte van een referentie box.
Simpel gehouden kun je stellen dat je een laag gaat plaatsen ten opzicht van de bovenkant en linkerkant van de body.
Voorbeeld:
<style type="text/css">
.lay1 {
width: 100px;
height: 100px;
background-color: #0080ff;
position: absolute;
top: 10px;
left: 10px;
}
.lay2 {
width: 150px;
height: 150px;
background-color: silver;
position: absolute;
top: 25px;
left: 25px;
}
</style>
<body>
<div class="lay1">Laag 1</div>
<div class="lay2">Laag 2</div>
</body>
Klik hier... Voorbeeld
Als je het voorbeeld goed doorneemt zul je zien dat hier twee lagen gedefinieerd worden. Een laag van 100 bij 100 pixels en een laag van 150 bij 150 pixels. Verder wordt bepaald waar de lagen moeten gezet door de browser. Laag 1 komt op 10 pixels van de bovenkant en 10 pixels van de linkerkant. Laag 2 komt op 25 pixels van de bovenkant en 25 pixels van de linkerkant.
In dit voorbeeld wordt als referentie voor het plaatsen van de lagen de body gebruikt van de pagina. Dit kan ook een table of een p zijn bijvoorbeeld. Op dit moment gaan we alleen uit van de body als referentiekader. Als we dit ter voorbereiding van dhtml gebruiken, is dit ook het meest logisch. In andere gevallen zul je het niet zo snel nodig hebben.
Relatief positioneren
Bij het bepalen van de plaats op een relatieve manier, verplaats je het element relatief ten opzichte van de originele plaats. Dit in tegenstelling tot absoluut positioneren van elementen. Dan plaats je het element waar je het maar wilt.
<style type="text/css">
h1.pos1{
position:relative;
left:35; }
</style>
<body>
<h1 class="pos1">Hoofdstuk 1</h1>
<p>De eerste alinea. Als je voor 35 een min-teken zet, schuift de titel naar links op.</p>
</body>
Klik hier... Voorbeeld
In het voorbeeld staat tevens een h1 zonder toepassen van CSS en positioneren.
|