HTML DOM Style zIndex প্রোপার্টি

পরিচয়

HTML DOM Style zIndex প্রোপার্টি একটি HTML ডকুমেন্টে পজিশन्ड এলিমেন্টের স্ট্যাকিং অর্ডার জানতে এবং সেট করতে ব্যবহৃত হয়।

সিনট্যাক্স

মান ফেরত দেওয়া

object.style.zIndex

মান সেট করা

object.style.zIndex = "value"

প্রাপ্য মানসমূহ

উদাহরণ

নিচে HTML DOM Style zIndex প্রোপার্টির একটি উদাহরণ দেওয়া হলো:

<!DOCTYPE html> <html> <head> <style> 
  body { 
    color: #000; 
    height: 100vh; 
  } 
  .box1 { 
    width: 100px; 
    height: 100px; 
    background: lightcoral; 
    position: relative; 
    top: 50px; 
  } 
  .box2 { 
    width: 100px; 
    height: 100px; 
    background: lightgreen; 
    position: relative; 
  } 
  .btn { 
    background: #db133a; 
    border: none; 
    height: 2rem; 
    border-radius: 2px; 
    width: 40%; 
    display: block; 
    color: #fff; 
    outline: none; 
    cursor: pointer; 
    margin: 1rem 0; 
  } 
</style> </head> <body> 
<h1>DOM Style zIndex Property Example</h1> 
<div class='box1'></div> 
<div class='box2'></div> 
<button onclick="add()" class="btn">Change zIndex</button> 
<script> 
  function add() { 
    document.querySelector('.box1').style.zIndex = "1"; 
  } 
</script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুটটি উত্পন্ন করবে:

"Change zIndex" বাটনে ক্লিক করলে লাল এবং সবুজ বক্সের অর্ডার পরিবর্তন হবে: