Creative IT Blog Just another WordPress site
Related Articles
পজিশন এবসলিউট (position:absolute) করে এবং top, bottom, left, and right ইত্যাদি প্রোপার্টি ব্যবহার করে একাধিক HTML উপাদানকে পরস্পরের উপর ওভারল্যাপ করা যায়। একাধিক HTML উপাদানকে পরস্পরের উপর ওভারল্যাপ করা কোন উপাদানটি কার উপরে অবস্থান করবে তা জেড ইনডেক্স (Z-index) প্রোপার্টি ব্যবহার করে নির্ধারণ করে দিতে পারি (Z-index) প্রোপার্টির মান হিসেবে আমরা auto এবং কোন সংখ্যা যেমন 1,2,3,4,-1 প্রভৃতি ব্যবহার করতে পারি। এ ছাড়া অনেক সময় আমরা যখন কোন section কে ফিক্সড রাখি তখন scroll করার সময় দেখা যায় অন্য কোন element সেই section এর উপর দিয়ে ওভারল্যাপ করতেছে তখন আমরা যেই section কে ফিক্সড রাখি সেটার জেড ইনডেক্স (Z-index) প্রোপার্টি আমরা অনেক বারিয়ে দিই যাতে সেটা সবার উপরে অবস্থান করে ।
নিচে জেড ইনডেক্স (Z-index) প্রোপার্টি এর একটি example দেখানো হল।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Creative IT Blog</title>
<style>
.wrapper{
position: relative;
width: 600px;
height: auto;
margin: 0 auto;
background: #767b69;
padding: 20px;
}
.one{
background: #3ea41b;
width: 140px;
height: 140px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.two{
background: #ecc613;
width: 140px;
height: 140px;
position: absolute;
top: 70px;
left: 70px;
z-index: 2;
}
.three{
background: #1398ec;
width: 140px;
height: 140px;
position: absolute;
top: 140px;
left: 140px;
z-index: 3;
}
.four{
background: #e54829;
width: 140px;
height: 140px;
position: absolute;
top: 210px;
left: 210px;
z-index: 4;
}
.five{
background: #1bd2e2;
width: 140px;
height: 140px;
position: absolute;
top: 280px;
left: 280px;
z-index: 5;
}
h3{
color: #fff;
padding-left: 10px;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”one”>
<h3>z-index: 1;</h3>
</div>
<div class=”two”>
<h3>z-index: 2;</h3>
</div>
<div class=”three”>
<h3>z-index: 3;</h3>
</div>
<div class=”four”>
<h3>z-index: 4;</h3>
</div>
<div class=”five”>
<h3>z-index: 5;</h3>
</div>
</div>
</body>
</html>
