Eigenschappen voor positioneren

De eigenschappen voor positioneren maken het mogelijk om de plaats van elementen in een document nauwkeurig te bepalen. De elementen kunnen daarbij in lagen boven elkaar gestapeld worden. Bovendien kan aangegeven worden of elementen wel of niet zichtbaar moeten zijn. Met deze laatste mogelijkheid hebben de eigenschappen voor positioneren niet alleen een functie waar het gaat om statische documenten. Door ze te gebruiken in combinatie met een script-taal kunnen dynamische onderdelen in een document worden opgenomen.
Voor een algemene toelichting op het positioneren van elementen, zie het onderdeel CSS en elementen.

Tot de eigenschappen voor positioneren behoren: position, top, right, bottom, left, z-index, overflow, clip en visibility.

De eigenschappen voor positioneren maken deel uit van CSS2.


position Met de position eigenschap kan de positie bepaald worden, waar een HTML-element in het document moet worden weergegeven.

Mogelijke waarden zijn absolute, relative en static.

Van elementen die de eigenschap position met de waarde absolute hebben, wordt de plaats van het element bepaald ten opzichte van de referentiebox welke gevormd wordt door het meest dichtbijgelegen ancestor element, dat de eigenschap position heeft met een andere waarde dan static (bijvoorbeeld absolute of relative). Indien zo'n element niet aanwezig is, wordt de plaats berekend ten opzichte van de box, waarin het gehele document zich bevindt. De ruimte die normaal gereserveerd is voor een absoluut gepositioneerd element en eventuele child elementen, verplaatst met het element mee. Absoluut gepositioneerde elementen krijgen hun plaats zonder dat rekening gehouden wordt met andere elementen.

Van elementen die de eigenschap position met de waarde relative hebben, wordt de plaats bepaald ten opzichte van de gebruikelijke positie van het element. De ruimte die normaal gereserveerd is voor het element, verplaatst niet met het element mee.

Absoluut en relatief gepositioneerde elementen vormen een nieuwe referentiebox voor descendent elementen. Een descendent element verplaatst met het ancestor element mee. Dat geldt ook indien het child element relatief gepositioneerd is ten opzichte van het parent element. Wanneer een element verplaatst wordt, behoudt het zijn oorspronkelijke verschijningsvorm, inclusief eventuele overgangen naar een nieuwe regel.

Elementen die de eigenschap position met de waarde static hebben, worden op dezelfde wijze weergegeven als normaal HTML. Er kan geen plaats aan toegekend worden en ze definiëren geen nieuwe referentiebox voor descendent elementen. Een uitzondering voor dat laatste betreft het BODY element, dat wel een referentiebox vormt voor descendent elementen.

De waarde fixed is een variant op absolute. Het enige verschil is dat de plaats niet bepaald wordt ten opzichte van een referentiebox, maar ten opzichte van de canvas (dat deel van de browser waarin een document wordt weergegeven).

De beginwaarde is static.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt niet geërfd.

De position eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
De waarde fixed wordt nog door geen enkele browser ondersteund.

De opbouw is:

position: waarde



top
bottom 		De eigenschappen top en bottom bepalen de plaats van een element in verticale richting in het vlak van het scherm (de y-richting) ten opzichte van de referentiebox.

Mogelijke waarden zijn lengte, percentage en auto.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend in relatie tot de hoogte van de referentiebox.
Als de hoogte van het parent element bepaald is op auto, dan leidt een percentage voor top of bottom tot een niet gedefinieerd resultaat.
Bij absoluut gepositioneerde elementen nemen de waarden van top en bottom de functies van de overeenkomstige margin eigenschappen over (een absoluut gepositioneerd element heeft dus geen margin).

De beginwaarde is auto.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute, relative of fixed hebben.

De eigenschap wordt niet geërfd.

De top eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
De bottom eigenschap wordt nog door geen enkele browser ondersteund.

De opbouw is:

top: waarde



left
right 		Met de eigenschappen left en right bepalen de plaats van een element in horizontale richting in het vlak van het scherm (de x-richting) ten opzichte van de referentiebox.

Mogelijke waarden zijn lengte, percentage en auto.

De lengte wordt uitgedrukt als combinatie van een getal en een eenheid, een percentage als combinatie van een getal en het %-teken. Het percentage wordt berekend in relatie tot de breedte van de referentiebox.
Bij absoluut gepositioneerde elementen nemen de waarden van right en left de functies van de overeenkomstige margin eigenschappen over (een absoluut gepositioneerd element heeft dus geen margin).

De beginwaarde is auto.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute, relative of fixed hebben.

De eigenschap wordt niet geërfd.

De left eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
De right eigenschap wordt nog door geen enkele browser ondersteund.

De opbouw is:

left: waarde


De eerste voorbeelden laten tonen, hoe de plaats bepaald wordt bij relatief en absoluut gepositioneerde elementen. Variaties op deze voorbeelden zijn te zien bij de beschrijving van Relatief positioneren en Absoluut positioneren in het onderdeel CSS en elementen.

In het document bevat een element op blokniveau (DIV) een inline element (SPAN). De opbouw is:

<BODY ..>
<DIV ID="d1">Deze ... <SPAN ID="s1">s1</SPAN> ... element.</DIV>
</BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

Het DIV element is relatief gepositioneerd en vormt daardoor de referentiebox voor het child element SPAN. Omdat er geen verdere eigenschappen voor positioneren zijn gebruikt, krijgt het DIV element de normale plaats in het document.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 150px;
      position: relative;
      background: yellow;
}
#s1 { font-size: 18pt;
      background: lime;
}
-->
</STYLE>

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.


Wanneer het SPAN element relatief gepositioneerd wordt, verplaatst het 80 pixels naar beneden en 20 pixels naar rechts ten opzichte van de normale positie. De ruimte die het SPAN element normaal inneemt, blijft gereserveerd in het DIV element.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 150px;
      position: relative;
      background: yellow;
}
#s1 { position: relative;
      top: 80px;
      left: 20px;
      font-size: 18pt;
      background: lime;
}
-->
</STYLE>

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.


Wanneer het SPAN element absoluut gepositioneerd wordt, verplaatst het 80 pixels naar beneden en 20 pixels naar rechts ten opzichte van de referentiebox, welke gevormd wordt door het DIV element. De ruimte die het SPAN element normaal inneemt, komt vrij en wordt ingenomen door de rest van de inhoud van het DIV element.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 150px;
      position: relative;
      background: yellow;
}
#s1 { position: absolute;
      top: 80px;
      left: 20px;
      font-size: 18pt;
      background: lime;
}
-->
</STYLE>

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.


In het volgende voorbeeld bevat een DIV element naast tekst ook twee inline SPAN elementen, aangeduid met s1 en s2. De opbouw van het document is als volgt:

<BODY ..>
<DIV ID="d1">div <SPAN ID="s1">s1 <SPAN ID="s2">s2</SPAN> s1</SPAN> div</SPAN></DIV>
</BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

Het DIV element is relatief gepositioneerd en vormt daardoor de referentiebox voor de beide descendent elementen. Omdat er geen verdere eigenschappen voor positioneren zijn gebruikt, krijgt het de normale plaats in het document.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { background: lime;
}
#s2 { background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.

Het eerste SPAN element (s1) is relatief gepositioneerd. Omdat in horizontale richting geen positie is opgegeven, verplaatst s1 alleen 60 pixels naar beneden ten opzichte van de normale positie. Het tweede SPAN element (s2) verplaatst mee. De ruimte die s1 normaal inneemt, blijft gereserveerd in het DIV element.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { position: relative;       top: 60px;       background: lime;
}
#s2 { background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.

Het eerste SPAN element (s1) is absoluut gepositioneerd en verplaatst 60 pixels naar beneden ten opzichte van de bovenkant van de referentiebox (DIV). Het tweede SPAN element (s2) verplaatst mee. De ruimte die s1 normaal inneemt, komt vrij en wordt ingenomen door de rest van de inhoud van het DIV element.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { position: absolute;
      top: 60px;
      background: lime;
}
#s2 { background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.

Het tweede SPAN element (s2) is relatief gepositioneerd en verplaatst 60 pixels naar beneden en 100 pixels naar rechts ten opzichte van de normale positie. De ruimte die s2 normaal inneemt, blijft gereserveerd in s1.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { position: relative;
      top: 60px;
      background: lime;
}
#s2 { position: relative;
      top: 60px;
      left: 100px;
      background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.

Het tweede SPAN element (s2) is relatief gepositioneerd en verplaatst 60 pixels naar beneden en 100 pixels naar rechts ten opzichte van de referentiebox (s1). De ruimte die s2 normaal inneemt, vervalt en de rest van de inhoud het eerste SPAN element (s1) en het DIV element nemen de vrijgekomen ruimte in.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { position: relative;
      top: 60px;
      background: lime;
}
#s2 { position: absolute;
      top: 60px;
      left: 100px;
      background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.

Het eerste SPAN element (s1) is absoluut gepositioneerd, het tweede SPAN element relatief.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { position: absolute;
      top: 60px;
      background: lime;
}
#s2 { position: relative;
      top: 60px;
      left: 100px;
      background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.

Zowel het eerste (s1) als het tweede SPAN element (s2) zijn absoluut gepositioneerd.

<STYLE TYPE="text/css">
<!--
#d1 { font-size: 32px;
      width: 240px;
      position: relative;
      background: yellow;
}
#s1 { position: absolute;
      top: 60px;
      background: lime;
}
#s2 { position: absolute;
      top: 60px;
      left: 100px;
      background: fuchsia;
}

 Voorbeeld position. Klik op de afbeelding en bekijk de weergave door de browser.



z-index Bij het verplaatsen van een element kan de inhoud ervan die van een ander element bedekken. De normale volgorde waarin elkaar overlappende elementen worden weergegeven, is van onder naar boven (in de z-richting loodrecht op het scherm) in de volgorde waarin ze in een document verschijnen. De z-index eigenschap kan worden gebruikt om een andere volgorde (z-order) te specificeren.

Mogelijke waarden zijn auto en integer.

Bij de waarde auto wordt de normale volgorde aangehouden.
Bij elementen op het zelfde niveau (sibling elementen), wordt het element met de hoogste waarde (integer) bovenaan geplaatst. Elementen met een negatieve waarde worden onder hun parent element geplaatst, elementen met een positieve waarde worden boven hun parent element geplaatst. Een element kan niet achter een grandparent geplaatst worden. De waarde "0" voor de z-index is gelijk aan auto.

De beginwaarde is auto.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute of relative hebben.

De eigenschap wordt niet geërfd.

De z-index eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Netscape Navigator ondersteunt de z-index eigenschap alleen voor elementen op hetzelfde niveau.

De opbouw is:

z-index: waarde


Een eerste voorbeeld van de z-index eigenschap is te zien bij de beschrijving van het Werken met lagen in het onderdeel CSS en elementen.

In het volgende voorbeeld zijn de boxen van drie DIV elementen in lagen boven elkaar geplaatst. Met de z-index eigenschap is bepaald in welke volgorde ze moeten worden weergegeven. Het resultaat is een logo. Doordat de afbeelding via de background-image eigenschap is opgenomen, wordt in browsers die geen style sheets ondersteunen alleen de tekst weergegeven.

Het document is als volgt opgebouwd:

<BODY ..>
<DIV ID="d1"></DIV>
<DIV ID="d2"><FONT SIZE="+4"><SPAN ID="s1">face to face</SPAN></FONT></DIV>
<DIV ID="d3"></DIV>
</BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.

<STYLE TYPE="text/css">
<!--
#d1 { width: 250px;
      height: 50px;
      position: absolute;
      z-index: 1;
      top: 60px;
      left: 10px;
      background: black;
}

#d2 { width: 250px;
      height: 50px;
      position: absolute;
      z-index: 3;
      top: 60px;
      left: 15px;
      color: white;
}

 Voorbeeld z-index. Klik op de afbeelding en bekijk de weergave door de browser.

#d3 { width: 105px;
      height: 125px;
      position: absolute;
      z-index: 2;
      top: 10px;
      left: 40px;
      background-image: url(../../images/face.gif);
}

#s1 { font-size: 40px;
}
-->
</STYLE>

overflow Met de overflow eigenschap wordt bepaald wat er gebeurt, als de inhoud van een absoluut gepositioneerd element de opgegeven hoogte of breedte ervan te boven gaat.

Mogelijke waarden zijn visible, hidden, scroll en auto.

De waarde visible zorgt ervoor dat afmetingen van de box zo worden aangepast, dat de gehele inhoud van het element toch zichtbaar blijft. Een eventuele padding of border valt buiten de weergegeven inhoud.
Met de waarde hidden wordt de inhoud weergegeven tot de afmetingen van het element bereikt zijn, maar er worden geen schuifbalken geplaatst. Een eventuele padding of border heeft betrekking op de normale breedte en hoogte van het element.
Met de waarde auto hangt het gedrag van de browser af, maar zouden wel schuifbalken moeten worden geplaatst.
Bij de waarde scroll moeten altijd schuifbalken worden geplaatst, ook wanneer dit niet nodig is om de gehele inhoud weer te geven. Deze mogelijkheid voorkomt het verdwijnen en verschijnen van schuifbalken als inhoud dynamisch gewijzigd wordt en de ene keer wel en de andere keer niet past.

De beginwaarde is visible.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute hebben.

De eigenschap wordt niet geërfd.

De overflow eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
Netscape Navigator 4 ondersteunt alleen de waarden visible en hidden.

De opbouw is:

overflow: waarde


In de volgende voorbeelden worden de verschillende waarden van de overflow eigenschap gedemonstreerd. De opbouw van het document is:

<BODY ..>
<DIV ID="d1">In dit voorbeeld ...</DIV>
</BODY>

De opbouw van het stijlblok in de head van het document staat steeds naast de afbeelding weergegeven.

In het eerste voorbeeld is de overflow eigenschap met de waarde visible gebruikt.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 120px;
      position: absolute;
      top: 30px;
      left: 30px;
      overflow: visible;
      background: yellow;
}
-->
</STYLE>

 Voorbeeld overflow: visible. Klik op de afbeelding en bekijk de weergave door de browser.

In het twee voorbeeld is de overflow eigenschap met de waarde hidden gebruikt.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 120px;
      position: absolute;
      top: 30px;
      left: 30px;
      overflow: hidden;
      background: yellow;
}
-->
</STYLE>

 Voorbeeld overflow: hidden. Klik op de afbeelding en bekijk de weergave door de browser.

In het derde voorbeeld is de overflow eigenschap met de waarde auto gebruikt.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 120px;
      position: absolute;
      top: 30px;
      left: 30px;
      overflow: auto;
      background: yellow;
}
-->
</STYLE>

 Voorbeeld overflow: auto. Klik op de afbeelding en bekijk de weergave door de browser.

In het vierde voorbeeld is de overflow eigenschap met de waarde scroll gebruikt.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 120px;
      position: absolute;
      top: 30px;
      left: 30px;
      overflow: scroll;
      background: yellow;
}
-->
</STYLE>

 Voorbeeld overflow: scroll. Klik op de afbeelding en bekijk de weergave door de browser.



clip Met de clip eigenschap kan aangegeven worden welk deel van een element zichtbaar moet zijn.

Mogelijke waarden zijn <vorm> en auto.
Voor <vorm> kan op dit moment alleen de waarde rect(<top> <right> <bottom> <left>) gebruikt worden. Voor de coördinaten <top>, <right>, <bottom> en <left> van de rechthoek wordt ingevuld lengte of auto.

Met de waarde auto voor de clip eigenschap is het gehele element zichtbaar. De lengte wordt uitgedrukt als de combinatie van een getal en een eenheid en wordt bepaald ten opzichte van het beginpunt (de linker bovenhoek) van het element. Negatieve waarden zijn toegestaan. Elk van de coördinaten kan vervangen worden door de waarde auto. Deze zorgt ervoor dat het element in de aangegeven richting geheel zichtbaar is.
Elke deel van een element dat buiten het aangegeven gebied valt (met inbegrip van de padding en de border), is transparent.

De beginwaarde is auto.

De eigenschap kan gebruikt worden voor alle elementen die de eigenschap position met de waarde absolute hebben.

De eigenschap wordt niet geërfd.

De clip eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3. Netscape Navigator 4 ondersteunt de waarde auto voor de coördinaten alleen voor top en left.

De opbouw is:

clip: waarde


In het volgende voorbeeld van de clip eigenschap is een afbeelding drie keer met behulp van het DIV element absoluut gepositioneerd, waarbij de positie van de laatste tweemaal precies gelijk is. Bij het eerste DIV element is de clip eigenschap niet gebruikt en de afbeelding wordt daardoor geheel weergegeven. Bij het tweede DIV element is is de clip eigenschap wel gebruikt en is voor alle vier de coördinaten een lengte opgegeven. Bij het derde DIV element zijn de coördinaten voor right en bottom bepaald op auto. De afbeelding is naar rechts en naar onder geheel zichtbaar.

De opbouw van het document is:

<BODY ..>
<DIV ID="d1"><IMG SRC="face.gif" WIDTH="105" HEIGHT="125" ...></DIV>
<DIV ID="d2"><IMG SRC="face.gif" WIDTH="105" HEIGHT="125" ...></DIV>
<DIV ID="d3"><IMG SRC="face.gif" WIDTH="105" HEIGHT="125" ...></DIV>
</BODY>

De opbouw van het stijlblok in de head van het document staat naast de afbeelding weergegeven.
<STYLE TYPE="text/css">
<!--
#d1 { position: absolute;
      top: 10px;
      left: 10px;
}
#d2 { position: absolute;
      top: 10px;
      left: 160px;
      clip: rect(15px 45px
      50px 0px);
}
#d3 { position: absolute;
      top: 10px;
      left: 160px;
      clip: rect(55px auto
      auto 50px);
}
-->
</STYLE> 		Voorbeeld clip. Klik op de afbeelding en bekijk de weergave door de browser.


visibility Met de visibility eigenschap kan bepaald worden of een element in eerste instantie zichtbaar of verborgen wordt weergegeven. De eigenschap is vooral nuttig wanneer gebruikt gemaakt wordt van scripts, die ervoor zorgen dat slechts één of enkele elementen die elkaar overlappen dynamisch worden weergegeven.

Mogelijke waarden zijn inherit, visible en hidden.

De opmaak van een element wordt door de visibility eigenschap niet gewijzigd. Elementen waarvoor de waarde hidden geldt, worden transparent en nemen nog steeds dezelfde ruimte in als waren ze visible (dit in tegenstelling tot bij de display eigenschap met de waarde none). Voor elementen met de waarde inherit geldt dezelfde visibility als bij het parent element.

De beginwaarde is inherit.

De eigenschap kan gebruikt worden voor alle elementen.

De eigenschap wordt alleen geërfd als de waarde inherit is.

De visibility eigenschap wordt niet ondersteund door Microsoft Internet Explorer 3.
Netscape Navigator 4 ondersteunt de visibility eigenschap alleen voor elementen die de eigenschap position met de waarde absolute of relative hebben.

De opbouw is:

visibility: waarde


De verschillende waarden voor de visibility eigenschap worden gedemonstreerd met een document met de volgende opbouw van de Body:

<BODY ..>
<DIV ID="d1">Met de ... <SPAN ID="s1">dit deel van de tekst</SPAN> ... zichtbaar.</DIV>
</BODY>

De opbouw van het stijlblok in de head van het document staat steeds naast de afbeelding weergegeven.

Wanneer de eigenschap visibility: visible gebruikt wordt is de complete tekst zichtbaar.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 150px;
      background: yellow;
}

#s1 { visibility: visible;
}
-->
</STYLE>

 Voorbeeld visibility: visible. Klik op de afbeelding en bekijk de weergave door de browser.


Met de eigenschap visibility: hidden wordt de tekst ingesloten door het SPAN element niet weergegeven.

<STYLE TYPE="text/css">
<!--
#d1 { width: 120px;
      height: 150px;
      background: lime;
}

#s1 { visibility: hidden;
}
-->
</STYLE>

 Voorbeeld visibility: hidden. Klik op de afbeelding en bekijk de weergave door de browser.

  Inhoud Handleiding HTML   Index   Overzicht stijleigenschappen


De gebruikte style sheets voldoen aan CSS 2 Dit document voldoet aan HTML 4.01 Laatste wijziging 11 maart 2000
Copyright © 1995-2000 Hans de Jong