Gigadesign, XHTML-CSS website maken

Hoe zit dat nu met relative en absolute?

Heb je je ooit al eens afgevraagd hoe het komt dat een object gepostioneerd met CSS invloed heeft op andere objecten die het bevat ? Laten we eens kijken hoe aan bepaalde eisen kan worden voldaan door een gepositioneerd element te verpakken met een ander.

Dit is de officiële vertaling van de Making the Absolute, Relative van Douglas Bowman , en er is vriendelijk toelating gegeven aan Gigadesign.be om deze te publiceren.
Waarvoor dank.

Het origineel is in de “ik”-vorm geschreven, dus ook de vertaling waardoor het niet mijzelf betrefd, maar wel Douglas Bowman.

Hoe zit dat nu met die geneste divs?

Een nieuwsgierige lezer vroeg onlangs over het redesign van Adaptive Path:

I’m puzzling over why with the main nav bar you nested an absolute div into a relative div?
Ik begrijp niet waarom in de hoofd-navigatie balk je een absolute div plaats in een relative div?

Een eenvoudig antwoord op deze vraag is: Omdat ik optimale flexibiliteit wenste te hebben voor de header en de navigatie, en ook om ervoor te zorgen dat de afstand tussen navigatie en logo steeds hetzelfde zou zijn, op eender welke instelling van de tekstgrootte.

Dat is het strategische antwoord dat de reden verstrekt voor de methode. Maar ik denk dat hij ook een tactisch antwoord zocht. Om zijn vraag te kunnen beantwoorden zal ik eerst een paar stappen terug gaan en leg de werking van CSS uit in mijn eigen woorden, toon een voorbeeld dat een ander effect aantoont dan degene bij het Adaptive Path design, om daarna terug te komen op de Adaptive Path navigatie.

Omvattende blokken (in de positionerings context)

Een absoluut gepositioneerd element genest in een relatief gepositioneerd element is een veel voorkomende techniek. Misschien meer bekend is de omgekeerde verklaring: een relatief gepositioneerd element zit rondom een absoluut gepositioneerd element.

Volgens de CSS2 specificatie, een absoluut gepositioneerd element wordt geplaatst in verhouding tot het omvattende blok. Elk element wordt geacht te zijn “gepositioneerd” als het een position waarde heeft, welke zijn: relative, absolute of fixed (alles andere dan static).
Static is een van de mogelijke waarden voor de position eigenschap. Het is ook de standaard waarde voor elk element als geen andere position is gedeclareerd. Static wil eigenlijk zeggen dat een element zijn positie niet is aangepast, het element zal verschijnenen in de normale logische volgorde (stroom) van het document rekening houdend met andere nabijgelegen elementen en omvattende blokken.

Als een absoluut gepositioneerd element zich niet bevindt in een omvattende blok, (als geen parent-elementen gepositioneerd zijn) zal het geplaatst worden relatief ten opzichte van de pagina randen (ook wel de feitelijke omvattende blok genoemd). dus een element gestyld volgens de deze CSS:

#topleft {
position:absolute;
top:0;
left:0;
}

zal geplaatst worden in de bovenste linkse hoek van de pagina. Nochtans, om het even welke geplaatste parent-element vestigt een nieuw bevattend blok voor al zijn onderliggende elementen. Als een child-element gepositioneerd wordt, de positie-context van elke onderliggende element wordt teruggebracht naar de grenzen van dit parent-element (de nieuwe omvattende blok). Dus de box offsets in bovenstaande regel zou het #topleft element positioneren in de linkse boven hoek van het gepositioneerde parent-element, in plaats van de bovenste linkse hoek van de pagina.

Het noorden kwijt? Ik zie ook het bos door de bomen niet meer. Ik zal het verduidelijken met een voorbeeld.

Dynamisch positioneren.

Voor Stopdesign.com, (op moment van schrijven) Maal ik gebruik van absolute positionering voor de rechter kolom (#subcol). Toen ik de template maakte, wou ik dat de rechter kolom direct onder de header (#header) kwam zonder deze te overlappen of zelfs spatie’s tussen de blokken.
De header bevat het logo en hoofdnavigatie. Omdat de navigatie bestaat uit tekst kan deze worden aangepast via browser-instellingen. Dit heeft invloed op de hoogte van de volledige header.
Ik zou de rechter kolom kunnen hebben gepositioneerd in context met de pagina-grenzen, waardoor ik een startpositie kon bepalen vanaf bovenaan door te berekenen hoe hoog de header zou zijn. Maar de header kan varieren in hoogte door browser-bepaalde standaard tekstinstellingen, dit wil zeggen dat de rechter kolom soms de header zou overlappen als deze in hoogte groter werd, of zelfs een spatie zou verschijnen tussen de header en de rechter kolom als de tekst in de header zou verkleinen dan de door mij ingestelde hoogte.

Om deze variable header hoogte te verkrijgen heb ik een gepositioneerd container element (#content). Deze container komt in de broncode direct achter de header en er is een position.relative; aan toegewezen. Dit laat toe dat het container element te verschijnen in de normale logische volgorde van het document. De top van de container zal altijd juist onder de onderkant van de header verschijnen, de hoogte van de header heeft nu geen invloed meer op de plaatsing ervan.

Omdat de #content is gepositioneerd zal deze de positie-context op nul zetten (resetten) voor elk element wat zich erin bevindt. De rechter kolom (#subcol) bevindt zich binnen in #content, dus de rechter kolom zal worden gepositioneerd in de bovenste linker hoek van de #content in plaats van in de bovenste linker hoek van de pagina.
Dit staat de rechter kolom toe om in verticale positie volgens de hoogte van header zich te plaatsen, zoals voorgesteld in bovenstaande afbeelding.

Ik hou van de onderkant-navigatie

Uiteindelijk komen we dan terug bij de navigatie van Adaptive Path welke een andere voorbeeld toont van het absolute relaltief maken. Ik zou eenvoudig een vaste margin-top kunnen hebben bepaald voor de navigatie en klaar. Maar in dit geval, wil ik dat de header altijd dezelfde hoogte heeft, bij om het even welke de lettergrootte de navigatie heeft of wordt. Met andere woorden, ik wil niet dat de donker groene boord aan de onderkant van de navigatie zich verplaatst in verticale positie, relatief tegenover het logo, zoals vorgesteld in de 2 bovenstaande afbeeldingen.

De teskt in de navigatie is vrij om groter of kleiner te worden, maar de basislijn positie blijft altijd dezelfde. Het raakt altijd de donker groene boord en zal het nooit overlappen. Door het #nav element te positioneren met position:relative; en een specifieke hoogte te bepalen van 72px, welke op zijn beurt een nieuwe positie-context vestigt voor de “inner” div. De inner div kan nu absoluut worden gepositioneerd aan de onderkant van de #nav container door gebruik te maken van bottom:0;.

Andere vormen van gebruik voor deze techniek zullen zeker bestaan. Het is zeker geen ongewone wens om een positie vrij te maken voor een aboluut gespositioneerd element naar een andere plaats dan de pagina randen. De redenen waarom ik doe wat ik doe is vrij duidelijk voor mij, maar niet altijd zo duidelijk voor een ander.
Misschien valt deze techniek nu meer te begrijpen voor anderen of is zelf duidelijker te begrijpen.