জেড ইনডেক্স (Z-index)
পজিশন এবসলিউট (position:absolute) করে এবং top, bottom, left, and right ইত্যাদি প্রোপার্টি ব্যবহার করে একাধিক HTML উপাদানকে পরস্পরের উপর ওভারল্যাপ করা যায়। একাধিক HTML উপাদানকে পরস্পরের উপর ওভারল্যাপ করা কোন উপাদানটি কার উপরে অবস্থান করবে তা জেড ইনডেক্স (Z-index) প্রোপার্টি ব্যবহার করে নির্ধারণ করা হয়। (Z-index) প্রোপার্টির মান হিসেবে আমরা auto এবং কোন সংখ্যা যেমন 1,2,3,-1 প্রভৃতি ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;}
h2{color:#ffc;}
h1{color:#F30;}
div{
padding:10px;
border:#000 1px solid;
width:230px;
height:230px;
margin:30px;}
#box1{background:#F00;
position:absolute;
left:20px;
top:20px;
z-index:1;
}
#box2{background:#F06;
position:absolute;
left:90px;
top:90px;
z-index:2;
}
#box3{background:#F3F;
position:absolute;
left:160px;
top:160px;
z-index:3;
}
#box4{background:#F9C;
position:absolute;
left:250px;
top:250px;
z-index:4;
}
</style>
</head>
<body >
<h1>This is an example of Z-index.</h1>
<div id="box1"><h2>First box. Z-index 1</h2></div>
<div id="box2"><h2>Second box. Z-index 2</h2></div>
<div id="box3"><h2>Third box. Z-index 3</h2></div>
<div id="box4"><h2>Forth box. Z-index 4</h2></div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত