Deze week gaan we het alleen maar hebben over layout. Dit is vaak het moeilijkste gedeelte van het ontwikkelen van een website, het is dus belangrijk dat je goed weet hoe browsers bepalen waar de HTML elementen komen te staan waar ze staan.
Vorige week hebben we al gezien hoe we de grootte van elementen kunnen definiëren. En we hebben ook gezien hoe we elementen kunnen floaten. Dit zijn al twee heel belangrijke ingrediënten om layouts te kunnen maken. Deze gaan we later gebruiken om kolommen op een pagina te maken
Een derde ingrediënt is de position CSS eigenschap. Hiermee kunnen we elementen op een andere manier positioneren dan dat standaard gebeurt. Standaard hebben elementen de waarde static voor deze eigenschap, deze elementen zijn dan niet gepositioneerd. Dat is niet erg, de meeste elementen zijn niet gepositioneerd. Als een element een absolute, relative of fixed position heeft is deze wel gepositioneerd. Hier komen we later op terug.
Laten we meteen maar gaan kijken naar wat er gebeurt als we elementen absoluut gaan positioneren.
Dit is de meest drastische manier om een element te positioneren. Als je een element absoluut positioneert wordt het verwijderd uit de flow van de HTML pagina en wordt op een absolute plek op de pagina geplaatst.
span {
position: ;
top: px;
left: px;
border: 1px solid red;
color: red;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span>Help, ik zit gevangen in een muur van tekst</span> Cras ac dui feugiat, suscipit enim gravida, commodo elit. Ut eu vulputate orci. Ut id quam tincidunt dui congue ultricies. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor tristique ipsum sit amet lacinia. Suspendisse placerat volutpat consequat.
Als een element absoluut gepositioneerd is kunnen we met top, bottom, left en right aangeven hoe ver van de rand het element geplaatst moet worden.
Wat is de rand? Normaal is dat de rand van je webpagina, de <body> tag. Maar als je element zich bevind binnen een element dat wel gepositioneerd is, dan gelden de randen van dat element als de rand die gebruikt wordt bij het positioneren.
div {
position: ;
top: px;
left: px;
width: 300px;
height: 300px;
border: 1px solid black;
}
span {
position: ;
bottom: px;
right: px;
border: 1px solid red;
color: red;
width: 100px;
}
<div>
Ik ben een div.
Zolang ik <b>wel gepositioneerd</b> ben geld ik als de rand waar al mijn subelementen tegenaan positioneren.
<span>Ik ben een absoluut gepositioneerde span</span>
</div>
Kan je ook een negatieve waarde opgeven voor top, left, bottom en right? Wat gebeurt er als je dat doet?
Wat gebeurt er als de div niet meer gepositioneerd is?
span {
position: relative;
top: px;
left: px;
border: 1px solid red;
color: red;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dui feugiat, suscipit enim gravida, commodo elit. Ut eu vulputate orci. Ut id quam tincidunt dui congue ultricies. <span>Help, ik zit gevangen in een muur van tekst</span> Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras auctor tristique ipsum sit amet lacinia. Suspendisse placerat volutpat consequat.