Позиционирање на елементи по 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;
}