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>
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>
Vervolg: Absoluut positioneren
Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin
Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 18 mei 2003
|