Opmaak: Een div met daarin 2 afbeeldingen

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




As is (geen positioning ingesteld => dan is het static)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Vogelhuis op position:relative ingesteld => dan kunnen we deze verschuiven met top en left
section.twee img.vogelhuis{
	position: relative;
	top: 50px;
	left: 50px;
}
Opgelet, je verschuift het element, maar deze behoud zijn plaats waar hij voorheen stond.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Vogel op position:absolute ingesteld
Wanneer je een element op absolute insteld, verwijder je deze van zijn gewone plaats, en plaats je deze op een bepaalde plaats terug. De vogel is hier dan ook verdwenen, en staat helemaal bovenaan de pagina links in de hoek. De plaats die die voorheen innam, is dan ook leeg, en andere elementen kunnen deze plaats dan innemen.
section.drie img.vogel{
	position: absolute;
	top: 50px;
	left: 50px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Vogel op position:absolute ingesteld, binnen het kader (tuin) dat ik op relative instel.
Wanneer je een element op absolute insteld binnen een element dat niet static is, zal deze zijn positie relatief tegenover dit element innemen. De vogel is hier dan ook terug binnen het vogelhuis.
section.vier div.tuin{
	position: relative;
}
section.vier img.vogel{
	position: absolute;
	top: 50px;
	left: 50px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Floating
Als ik de foto's nu naar links floaten, dan zal het tekstvak zich er tegenaan plaatsen...
section.vijf div.tuin{
	position: relative;
}
section.vijf img.vogel{
	position: absolute;
	top: 50px;
	left: 50px;
}
section.vijf div.tuin img.vogel, section.vijf div.tuin img.vogelhuis{
	float:left;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Floating
als ik het tekstvak nu ook links laat floaten... dan zie je plots de footer naar boven komen...
Dit komt, omdat de floating elementen niet meer de ruimte inpalmen. Deze tellen niet mee in de flow.
section.zes div.tuin{
	position: relative;
}
section.zes img.vogel{
	position: absolute;
	top: 50px;
	left: 50px;
}
section.zes div.tuin img.vogel, section.zes div.tuin img.vogelhuis, section.zes div.tuin p{
	float:left;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Floating
Om de footer terug onder de floating elementen te krijgen, moet je deze 'clearen'
section.zeven div.tuin{
	position: relative;
}
section.zeven img.vogel{
	position: absolute;
	top: 50px;
	left: 50px;
}
section.zeven div.tuin img.vogel, section.zeven div.tuin img.vogelhuis, section.zeven div.tuin p{
	float:left;
}
section.zeven div.footer{
	clear: both;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.