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

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

সিনট্যাক্স

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

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

মানসমূহ

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

উদাহরণ

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

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

css#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 সহ ব্লক):

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

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

Результат: