DIV en Lagen
DIV en Lagen
Welkom. In dit artikel vertel ik over het div-element, dat wordt gebruikt bij het maken van een website, en hoe je deze als lagen kunt gebruiken. Met lagen wordt bedoeld, stapelen of het over elkaar heen leggen van deze div-elementen. Hieronder volgt direct een voorbeeld;
Het div-element
Het element div, ook wel box of afdeling genoemd, gebruiken we tegenwoordig om complete webdesigns mee te maken. Div-elementen zijn onmisbaar geworden. Het heeft in verreweg de meeste gevallen de tabel doen vervangen. Tabellen gebruiken we meestal nog om overzichten te creëren, zoals voor prijslijsten en produktgegevens.
In plaats van tabellen, om een webpagina in te delen, gebruiken we dus div-elementen. De pagina-indeling wordt hiermee een stuk eenvoudiger en door het geven van bepaalde eigenschappen aan div-elementen, kunnen we deze naar eigen inzicht positioneren. In dit artikel leg ik uit, hoe je lagen kunt maken.
Programmering
Om lagen te creëren, geven we div-elementen een positie met coördinaten. Hiermee geven we aan waar een div-element moet komen te staan. We gebruiken hiervoor de eigenschap position. In dit artikel beperk ik me tot position: relative en position: absolute.
Position: Relative
In de html-code worden alle elementen volgens de flow van de pagina gepositioneerd. Dat wil in dit geval zeggen, dat bij 3 div-elementen, deze in volgorde, onder elkaar komen te staan. Standaard krijgen de elementen de positie: position: static. Het beginpunt van de div is 0px vanaf links en boven de pagina. Dit hoeft overigens niet specifiek te worden aangegeven. Laten we eens kijken hoe dat er uitziet;
Standaard volgorde van de div-elementen. Beginnend aan de linker- en bovenkant van de pagina. In de html-code;
Nu geven de div-elementen een position:relative. Het resultaat blijft hetzelfde. Echter, nu geven we de tweede div een coördinaat mee, left: 200px;
Deze div positioneert zich 200px vanaf de linkerkant, netjes onder de eerste div, volgens de flow van de pagina. Er hoeft daardoor geen waarde te worden gegeven aan position:top. Ofwel, de afstand vanaf de bovenkant van de pagina.
Wanneer we deze div in de eerste div plaatsen, dan wordt andermaal zichtbaar wat een relatief gepositioneerde div doet;
De tweede div positioneert zich nu 200px vanaf de linkerkant, maar dan naast de eerste div. Duidelijk wordt, dat de breedte van de div-elementen hier 200px is. Wanneer we 100px vanaf de linkerkant opgeven, ziet dat er alsvolgt uit;
De tweede div overlapt de eerste. Echter, hier is nog geen sprake van een laag. Want we kunnen in deze opzet, de eerste div nu niet boven de tweede div positioneren, waardoor deze weer div 2 overlapt.
Absolute
Om lagen te creëren, maken we gebruik van position:absolute. Div-elementen worden hiermee absoluut gepositioneerd, wat wil zeggen, dat deze zich niet meer in de flow van de pagina bevinden. Het maakt daardoor niet meer uit, waar het div-element zich in de html-code bevindt. Een reden om hiervoor te kiezen is, om belangrijke tekst op de pagina als eerste te laten lezen door de zoekmachines. Deze lezen in de broncode van een pagina, niet de pagina zoals wij dat op het scherm te zien krijgen.
Een navigatiemenu bijvoorbeeld, kan je helemaal onderaan de broncode plaatsen. De koppen en alinea’s als eerste. Toch staat het navigatiemenu boven de koppen en alinea’s, maar hoe kan dat?
Om position:absolute te illustreren, geef ik hieronder de html- en css-code, vervolgens het resultaat op het scherm.
Normaal gesproken, zou volgens de flow van de pagina, het menu onder de twee andere div-elementen moeten komen. Maar omdat we deze uit de flow hebben gehaald door een position:absolute en een coördinaat te gegeven, wordt de flow en dus andere elementen genegeerd. Het menu staat bovenaan, terwijl de belangrijke tekst als eerst wordt gelezen door de zoekmachines. Dat is goed voor zoekmachine optimalisatie.
Alle elementen onder het menu, voegen zich volgens de flow van de pagina, onder elkaar.
Combineren
De combinatie position:relative en absolute, komt van pas, wanneer de positie van een absoluut gepositioneerde div, afhankelijk moet worden van een “andere” div. Deze “andere” div, krijgt dan een position:relative. Deze fungeert dan als beginpunt voor absoluut gepositioneerde div-elementen. Voorwaarde is wel, dat een absoluut gepositioneerde div, in een div staat met position:relative.
Ter illustratie;
We zien dat de derde div, 40px vanaf de bovenkant en 20px vanaf linkerkant, ten opzichte van div 2 is geplaatst.
Wanneer de tweede div wordt verplaatst, zal de derde div, absoluut meegaan.
Stapelen (lagen)
Om div-elementen te stapelen, geven we deze ten eerste een position:absolute. Vervolgens coördinaten, en wanneer dat nodig is, een z-index, met andere woorden, welke laag is de eerste, tweede, derde, enzovoorts.
We plaatsen de drie div-elementen onder elkaar in de html-code en geven deze een aantal coördinaten. Laten we eens zien wat dat voor resultaat geeft;
In de html-code zien we de volgorde terug. De rode box (eerste div) is laag 1. Wat als we deze nu als 2e laag willen waardoor deze de blauwe box overlapt?
Door gebruik te maken van de z-index, kunnen we aangeven in welke volgorde, de div-elementen zich moeten stapelen.
Standaard hebben alle lagen een z-index van 0. De flow van de pagina is van kracht. De div-elementen staan immers onder elkaar in de html-code.
Opmerking. Dat deze absoluut gepositioneerd zijn, wil zeggen dat elementen zonder de eigenschap position, worden genegeerd. Elementen die deze eigenschap wel hebben, houden wel weer rekening met elkaar.
Na het geven van de volgende waardes, ziet dat er als volgt uit;
De rode box overlapt de blauwe. De groene is hoger in rang en overlapt op zijn beurt weer de rode box.
Hoe hoger de waarde van de z-index, hoe hoger de rang waardoor deze een lagere rang overlapt.
De materie position en z-index kan voor veel verwarring zorgen. Wanneer hier veel gebruik van wordt gemaakt, zorgt dat tevens voor een hoop gepuzzel.
Ik hoop dat ik je hiermee op weg heb kunnen helpen. Meer over de eigenschap position, volgt in komende artikelen.
Bedankt voor het lezen en veel succes!
Anthonie van Riessen
MijnComputerCursus.nl