< Terug naar het begin

Beginnen bij de basis

Voordat je de positie van elementen kan animeren, moet je weten hoe je elementen precies positioneerd. Hiervoor zal ik allereerst even over de basis gaan van het positioneren van elementen. Dit is voor mensen met een gedegen HTML en CSS kennis dodelijk saai, dus scoll hier gerust voorbij. Maar ben je er niet helemaal zeker van dat je goed door hebt hoe elementen gepositioneerd worden, neem het volgende stuk dan even door. Soms moet je even door de zure HTML heen bijten.

Static positie

Alle elementen in HTML hebben van nature de position: static. Dit betekend dat de elementen gerenderd worden in de volgorde waarin ze voorkomen in de HTML. De <p> op de regel boven de daar op volgende <hr /> zal boven de <hr /> weer gegeven worden. Zoals het volgende voorbeeld illustreerd.

Voorbeeld:

  <p>Alinea 1</p>
  <p>Alinea 2</p>
  <hr /> <!-- LETOP: De <p> van Aline 3 volgt na de <hr /> -->
  <p>Alinea 3</p>

Alinea 1

Alinea 2


Alinea 3

Dan hebben we nog een aantal positions die de positie van een element op de pagina beinvloeden, dat zijn de position: fixed, position: relative en de position: absolute. position: fixed is een heel handige, maar die gaan we niet behandellen. In dit geval zijn we alleen even geinteresseerd in relative en absolute.

Relatief positioneren

Allereerst position: relative, een element met deze waarde word gepositioneerd ten opzichte van zijn static positie. Dat doe je bijvoorbeeld door een top, left, right en/of een bottom waarde toe te kennen aan het element. Als we ons even de <p>-tags uit het eerdere voorbeeld voor de geest halen. Deze <p>-tags stonden onder elkaar met de zelfde afstand aan de linker zijde tot de rand. Stel nou dat ik de middelste <p>-tag een grotere marge aan de linker zijde wil geven. Dan kan ik dat doen door de marge aan de linker zijde te verhogen margin-left: 10px;. Of ik maak gebruik van de position: relative, zoals in het volgende voorbeeld.

Voorbeeld:

  <style>
    .spring-in {
      position: relative;
      left: 20px;
    }
    .margin-in {
      position: relative;
      left: 20px;
    }
  </style>
  <p>Alinea 1</p>
  <p class="spring-in">Alinea 2</p>
  <p>Alinea 3</p>
  <p class="margin-in">Alinea 4</p>

Alinea 1

Alinea 2

Alinea 3

Alinea 4

Als je goed kijkt zie je een verschil in de alinea die verplaatst word met margin-left: 10px; en de alinea die verplaatst word met position: relative. Dit komt simpel gezegt omdat de breedte van de <p> eerst bepaald word en daarna de verplaatsing van plaats vind. Dit is ook de reden dat ik voor dit soort acties doorgaans eerder voor de margin optie ga dan voor de relative position optie.

Een klein detail wat in dit voorbeeld niet opvalt is dat de positionering van het element gebeurd ten opzichte van het genoemde deel van het element. Je zou je een beetje voor kunnen stellen dat je in het vorige voorbeeld door middel van left: 20px; er aan de linker kant van het element 20 onzichtbare pixels bij plakt. Of misschien is het nog beter om je voor te stellen dat je het element een duwtje van 20px op de linker kant geeft, waardoor het element 20px naar rechts opschuift.
Duw je nu tegen de bovenkant doormiddel van top: 20px;, dat schuift het element dus 20px naar beneden ten opzichte van waar de bovenkant eerst zat. En stel nou dat je duwt op left: 20px; en op right: 20px;, dan gaan er vreemde dingen gebeuren.

Even samenvatten:

De position: relative maakt het dus mogelijk om een element te positioneren ten opzichte van de position: static die dit element van nature heeft.

Absoluut positioneren

Absoluut positioneren vinden wordt vaak moeilijker gevonden dat andere vormen van positioneren. Maar dat is het gelukkig niet. Bij het absoluut positioneren van een element moet je alleen 2 concepten onthouden. Het eerste concept is parent-child relaties. Het tweede concept, wat daar mee te maken heeft, is dat het absoluut positioneren van een element gebeurd ten opzichte van de eerste gepositioneerde parent.

Vadertjes en kinderen

In HTML is elk element een op z'n minst een kind/child van het HTML element. De HTML-tag omsluit alle andere tags, en is daardoor de ouder/parent van alle andere tags. Een wat technische manier om dat te zeggen is: Alle andere tags zijn genest in de HTML tag en daardoor childs van de HTML-tag. Een child nest dus in een parent, en de parents van een element zijn alle elementen die deze omsluiten. Dat is nog eens gedeeld ouderschap!

Voorbeeld:

  <div class="opa">
    <p class="papa kind-van-opa">
      <span class="zoon kleinkind-van-opa kind-van-papa">
        Tof zeg!
      </span>
    </p>
  </div>

In het bovenstaande voorbeeld is de div-tag opa de stamvader, de opper parent of de abraham. Opa is zowel parent van papa als van zoon. In dit geval zien we geen omsluitende tags, waardoor opa child is van niemand. Een stapje omlaag of dieper in de nesting hebben we paragraph-tag papa, dit is een child van opa en een parent voor zoon. En tenslotte hebben we span-tag zoon die child is van zowel opa als papa.

Waar is mijn parent

Nu weet je wat parents en childs zijn, en dan is concept 2 van het absoluut positioneren een stuk beter te behappen. Een absoluut gepositioneerd element is gepositioneerd ten opzichte van de eerste gepostioneerde parent. Dit betekent dat een element dat je absoluut positioneerd door alle parents loopt en de eerste die deze tegenkomt daarop baseerd het element de positie. Allemaal nog heel erg abstract, laten we een voorbeeld bekijken.

Voorbeeld:

  <style>
    .absolute {
      position: absolute;
      top: 0;
      right: 0;
    }
    .relative {
      position: relative;
    }
  </style>

<!-- Voorbeeld 1 --> <div class="relative"> <p>Alinea 1</p> <p class="relative"> Alinea 2 <span class="absolute">!Absoluut!</span> </p> <p>Alinea 3</p> </div>
<!-- Voorbeeld 2 --> <div class="relative"> <p>Alinea 1</p> <p> Alinea 2 <span class="absolute">!Absoluut!</span> </p> <p>Alinea 3</p> </div>
Voorbeeld 1

Alinea 1

Alinea 2 !Absoluut!

Alinea 3

Voorbeeld 2

Alinea 1

Alinea 2 !Absoluut!

Alinea 3

In het bovenstaande voorbeeld kan je zien hoe de absoluut gepositioneerde span zich positioneerd ten opzichte van zijn relatief gepositioneerde parents. In beide voorbeelden is de omsluitende <div>-tag relatief gepositioneerd. In voorbeeld 1 is de <p>-tag waar de span zich in bevind relatief gepositioneerd waar deze in voorbeeld 2 de natuurlijke static position heeft.

In voorbeeld één is de eerste niet static gepositioneerde parent de <p> van Alinea 2 die de <span> omsluit. Je ziet daarom ook dat de span zich positioneerd ten opzichte van de Alinea 2 <p>-tag.

In voorbeeld 2 heeft de Alinea 2 <p>-tag geen position: relative en gebruikt daarom de natuurlijke position: static. De absoluut gepositioneerde span zal daarom verder doorzoeken naar een parent met een andere position dan static. En komt daarom uit bij de omsluitende <div>.

Lees verder: Animeren met CSS