CSS CSS en elementen


Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie CSS en elementen | Indeling elementen | De box | Normal flow | Regelhoogte | Zwevende elementen | Positioneren van elementen | Relatief positioneren | Absoluut positioneren | Werken met lagen


Relatief positioneren

Met de eigenschap position: relative wordt de plaats van het element 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.
Een relatief gepositioneerd element vormt een referentiebox voor descendent elementen. Descendent elementen verplaatsten met het ancestor element mee.

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

<BODY ..>
<DIV ID="d1">Deze tekst vormt naast het SPAN element <SPAN ID="s1">s1</SPAN> de inhoud van het DIV element.</DIV>
</BODY>

De opbouw van het stijlblok in de head van het document is:

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

#s1 { font-size: 24px; background: lime; }
-->
</STYLE>

Voorbeeld relatief positioneren


Wanneer we het SPAN element relatief positioneren, wordt de plaats bepaald ten opzichte van de normale positie binnen het DIV element. De eigenschappen top: 80px en left: 20px verplaatsen de linker bovenhoek van het SPAN element 80 pixels naar beneden en 20 pixels naar rechts gemeten vanaf de linker bovenhoek van de normaal ingenomen ruimte. De normaal ingenomen ruimte verplaatst niet met het SPAN element mee.

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

#s1 { position: relative; top: 80px; left: 20px; font-size: 24px; background: lime; }
-->
</STYLE>

Voorbeeld relatief positioneren


Vervolg: Absoluut positioneren



Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 18 mei 2003