CSS সাজাকরণ - z-index বৈশিষ্ট্য

z-index প্রতিমান প্রতিষ্ঠান এলিমেন্টটিকে

z-index প্রতিমান

যখন এলিমেন্টটি অবস্থানিত হয়, তখন তা অন্য এলিমেন্টগুলির ওপর ওভারল্যাপ হতে পারে。

z-index প্রতিমান প্রতিষ্ঠান এলিমেন্টটিকে (কোনো এলিমেন্টকে আগে, কোনো এলিমেন্টকে পরে রাখা উচিত)।

এলিমেন্টটির স্ট্যাকিং অর্ডার সবচেয়ে বড় বা ছোট হতে পারে:

এটি একটি শিরোনাম

চিত্রের z-index তার জন্য -1, তাই তা লেখার পিছনে প্রস্থাপিত হবে。

প্রতিদর্শন

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

আপনার নিজেই চেষ্টা করুন

মনয়নীয়z-index শুধুমাত্রঅবস্থানিকরণ এলিমেন্ট(position: absolute、position: relative、position: fixed বা position: sticky) এবংঅলঙ্কৃত প্রতিমান(display: flex এলিমেন্টটির প্রত্যক্ষ সাব-এলিমেন্ট)।

আরেকটি z-index উদাহরণ

প্রতিদর্শন

এখানে, আমরা দেখতে পাই যে সবচেয়ে বড় স্ট্যাকিং অর্ডার ভিত্তিক এলিমেন্টটি সর্বদা ছোট স্ট্যাকিং অর্ডার ভিত্তিক এলিমেন্টের উপর থাকে:

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">ব্ল্যাক বক্স</div>
  <div class="gray-box">গ্রেই বক্স</div>
  <div class="green-box">গ্রিন বক্স</div>
</div>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

নির্দিষ্ট করা হয়নি z-index

যদি দুটি অবস্থানিকরণ এলিমেন্টগুলি নির্দিষ্ট করা হয়নি z-index ক্ষেত্রেHTML কোডের শেষ নির্দিষ্ট হলে ওভারল্যাপ হবেএলিমেন্টটি শীর্ষে দেখা যাবে。

প্রতিদর্শন

উপরোক্ত উদাহরণের মতো, কিন্তু এখানে কোনো নির্দিষ্ট করা হয়নি z-index：

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">ব্ল্যাক বক্স</div>
  <div class="gray-box">গ্রেই বক্স</div>
  <div class="green-box">গ্রিন বক্স</div>
</div>
</body>
</html>

আপনার নিজেই চেষ্টা করুন

CSS এট্রিবিউট

এট্রিবিউট বর্ণনা
z-index এলিমেন্টের স্ট্যাকিং ক্রিয়াকরণ