ელემენტების დაწყობა 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;
}