सीएसएस में जेड-अक्ष पर एलिमेंट्स का ओवरलैप

इस पाठ में हम जेड-अक्ष पर एलिमेंट्स के ओवरलैप पर विचार करेंगे। डिफॉल्ट रूप से, यदि दो एलिमेंट एक-दूसरे पर ओवरलैप होते हैं, तो वह एलिमेंट ऊपर होगा जो एचटीएमएल कोड में नीचे आता है।

आइए एक उदाहरण पर नजर डालते हैं। मान लीजिए कि हमारे पास दो एलिमेंट हैं, जो एक-दूसरे पर ओवरलैप होने के लिए एब्सोल्यूट पोजिशन्ड हैं। ऐसे मामले में वह एलिमेंट ऊपर होगा जो एचटीएमएल कोड में नीचे आता है:

<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;
}