CSS-те Z осі бойынша элементтерді біріктіру

Бұл сабақта біз 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;
}