Επικάλυψη Στοιχείων στον Άξονα Z στο CSS

Σε αυτό το μάθημα θα εξετάσουμε την επικάλυψη στοιχείων στον άξονα Z. Από προεπιλογή, αν δύο στοιχεία επικαλύπτονται το ένα το άλλο, τότε πιο πάνω θα είναι το στοιχείο που βρίσκεται πιο κάτω στον κώδικα HTML.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε δύο στοιχεία, τοποθετημένα απόλυτα ώστε να επικαλύπτονται το ένα το άλλο. Σε μια τέτοια περίπτωση πιο πάνω θα είναι το στοιχείο που βρίσκεται πιο κάτω στον κώδικα HTML:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	position: absolute;
	top: 30px;
	left: 30px;
	
	width: 100px;
	height: 100px;
	background: #ff8888;
}

#elem2 {
	position: absolute;
	top: 60px;
	left: 60px;
	
	width: 100px;
	height: 100px;
	background: #7e89eb;
}