Θέση σε σχέση με τον απόλυτο γονέα στο CSS

Στο προηγούμενο μάθημα αναλύσαμε ότι, εάν ορίσετε relative σε ένα γονέα, τότε οι απόγονοί του θα τοποθετούνται απόλυτα σε σχέση με αυτόν. Αυτό γίνεται πιο συχνά, όταν δεν θέλουν το γονικό στοιχείο να βγει από τη normal ροή.

Μπορεί επίσης να συμβεί ότι ο γονέας έχει οριστεί absolute. Σε αυτήν την περίπτωση, οι απόγονοι με absolute θα τοποθετούνται επίσης σε σχέση με έναν τέτοιο γονέα, και όχι σε σχέση με το παράθυρο του browser:

<div id="parent">
	<div id="child"></div>
</div>

#parent {
	position: absolute;
	top: 100px;
	left: 200px;
	
	width: 500px;
	height: 300px;
	border: 1px solid red;
}
#child {
	position: absolute;
	top: 0;
	left: 0;
	
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

Δημιουργήστε ένα τετράγωνο block με absolute θέση μεγέθους 400px. Μέσα σε αυτό δημιουργήστε δύο ακόμη blocks μεγέθους 50px. Τοποθετήστε το πρώτο block στην πάνω δεξιά γωνία του γονέα, και το δεύτερο block - στην κάτω αριστερή γωνία.