z-index বৈশিষ্ট্য

z-index বৈশিষ্ট্য নির্ধারণ করে কে শীর্ষে থাকবে যদি একাধিক এলিমেন্ট একে অপরের উপর ওভারল্যাপ করে।

সিনট্যাক্স

সিলেক্টর {
	z-index: সংখ্যা | auto;
}

সংখ্যাটি必须是 পূর্ণসংখ্যা, ধনাত্মক বা ঋণাত্মক হতে হবে। শূন্য হতে পারে।

মানসমূহ

মান	বর্ণনা
সংখ্যা	পূর্ণসংখ্যা এলিমেন্ট স্ট্যাকিং এর ক্রম নির্ধারণ করে: এলিমেন্টগুলো একে অপরের উপর ওভারল্যাপ করলে শীর্ষে থাকবে সেইটি, যার `z-index` বেশি।
`auto`	এলিমেন্ট স্ট্যাকিং এর ক্রম স্বয়ংক্রিয়ভাবে গঠিত হয়: উপরে থাকবে সেই এলিমেন্টটি, যা HTML কোডে নীচে অবস্থিত।

ডিফল্ট মান: auto।

উদাহরণ

এই উদাহরণে, ব্লকগুলি HTML কোডে তাদের ক্রম অনুসারে একে অপরের উপর স্ট্যাক হবে (z-index সেট নেই এবং ডিফল্ট মান - auto থাকবে)। প্রথম ব্লকটি সবচেয়ে নীচে থাকবে (লাল), এবং শেষ ব্লকটি - সবার উপরে থাকবে (সবুজ):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

উদাহরণ

z-index সেট করে স্ট্যাকিং এর ক্রম পরিবর্তন করা যাক। লাল ব্লককে - 3, নীল ব্লককে - 2, সবুজ ব্লককে - 1 দেওয়া হল। স্ট্যাকিং এর ক্রম বিপরীত হবে (সবার উপরে থাকবে z-index 3 সহ ব্লক):

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}