Z-সূচক এবং স্ট্যাকিং প্রসঙ্গ

CSS পডকাস্ট - 019: z-সূচক এবং স্ট্যাকিং প্রসঙ্গ

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

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

কিন্তু কোনটি ডিফল্টরূপে অন্যটির উপরে বসে? কোন আইটেমটি এটি করবে তা জানতে, আপনাকে z-index এবং স্ট্যাকিং প্রসঙ্গগুলি বুঝতে হবে।

জেড-সূচক

z-index বৈশিষ্ট্য স্পষ্টভাবে ব্রাউজারের 3D স্থান - Z অক্ষের উপর ভিত্তি করে HTML এর জন্য একটি স্তর ক্রম সেট করে। এটি সেই অক্ষ যা দেখায় কোন স্তরগুলি আপনার থেকে কাছাকাছি এবং আরও বেশি। ওয়েবের উল্লম্ব অক্ষ হল Y অক্ষ এবং অনুভূমিক অক্ষ হল X অক্ষ।

উপাদানের চারপাশে প্রতিটি অক্ষ

z-index বৈশিষ্ট্য একটি সংখ্যাসূচক মান গ্রহণ করে যা একটি ধনাত্মক বা ঋণাত্মক সংখ্যা হতে পারে। এলিমেন্টগুলি অন্য এলিমেন্টের উপরে প্রদর্শিত হবে যদি তাদের উচ্চতর z-index মান থাকে। যদি আপনার উপাদানগুলিতে কোন z-index সেট করা না থাকে তবে ডিফল্ট আচরণটি হল যে নথির উৎস ক্রম Z অক্ষকে নির্দেশ করে। এর মানে হল যে উপাদানগুলি আরও নীচে নথিগুলি তাদের সামনে উপস্থিত উপাদানগুলির উপরে বসে।

স্বাভাবিক প্রবাহে, আপনি যদি z-index এর জন্য একটি নির্দিষ্ট মান সেট করেন এবং এটি কাজ না করে, তাহলে আপনাকে উপাদানটির position মান static ছাড়া অন্য কিছুতে সেট করতে হবে। এটি একটি সাধারণ জায়গা যেখানে লোকেরা z-index সাথে লড়াই করে।

আপনি যদি ফ্লেক্সবক্স বা গ্রিড প্রসঙ্গে থাকেন তবে এটি হয় না, কারণ আপনি position: relative ।

নেতিবাচক z-সূচক

অন্য একটি উপাদানের পিছনে একটি উপাদান সেট করতে, z-index জন্য একটি ঋণাত্মক মান যোগ করুন।

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

যতক্ষণ পর্যন্ত .my-element z-index auto প্রাথমিক মান থাকে, ততক্ষণ .child উপাদানটি এর পিছনে বসবে।

.my-element এ নিম্নলিখিত CSS যোগ করুন, এবং .child এলিমেন্ট এর পিছনে বসবে না।

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

কারণ .my-element এখন একটি position মান রয়েছে যা static নয় এবং একটি z-index মান যা auto নয়, এটি একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করেছে। এর মানে হল যে আপনি যদি .child এর z-index - -999 সেট করেন, তবুও এটি .my-parent পিছনে বসবে না।

স্ট্যাকিং প্রসঙ্গ

একটি স্ট্যাকিং প্রসঙ্গ হল উপাদানগুলির একটি গোষ্ঠী যার একটি সাধারণ অভিভাবক রয়েছে এবং z অক্ষের উপরে এবং নীচে একসাথে চলে যায়।

এই উদাহরণে, প্রথম প্যারেন্ট উপাদানটির একটি z-index আছে 1 , তাই একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে। এর চাইল্ড এলিমেন্টের 999 এর একটি z-index রয়েছে। এই পিতামাতার পাশে, একটি সন্তানের সাথে অন্য অভিভাবক উপাদান রয়েছে৷ পিতামাতার একটি z-index 2 এবং শিশু উপাদানের একটি 2 z-index রয়েছে। যেহেতু পিতামাতা উভয়ই একটি স্ট্যাকিং প্রসঙ্গ তৈরি করেন, তাই সমস্ত শিশুর z-index তাদের পিতামাতার উপর ভিত্তি করে।

একটি স্ট্যাকিং প্রসঙ্গের ভিতরে উপাদানগুলির z-index সর্বদা তার নিজস্ব স্ট্যাকিং প্রসঙ্গে পিতামাতার বর্তমান ক্রমের সাথে আপেক্ষিক।

একটি স্ট্যাকিং প্রসঙ্গ তৈরি করা হচ্ছে

একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করতে আপনাকে z-index এবং position প্রয়োগ করতে হবে না। আপনি বৈশিষ্ট্যগুলির জন্য একটি মান যোগ করে একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করতে পারেন যা একটি নতুন যৌগিক স্তর তৈরি করে যেমন opacity , will-change এবং transform । আপনি এখানে সম্পত্তির একটি সম্পূর্ণ তালিকা দেখতে পারেন।

একটি যৌগিক স্তর কি তা ব্যাখ্যা করার জন্য, একটি ওয়েব পৃষ্ঠা একটি ক্যানভাস কল্পনা করুন। একটি ব্রাউজার আপনার এইচটিএমএল এবং সিএসএস নেয় এবং ক্যানভাস কত বড় করতে হবে তা নির্ধারণ করতে এগুলি ব্যবহার করে। এটি তারপর এই ক্যানভাসে পৃষ্ঠাটি আঁকা। যদি একটি উপাদান পরিবর্তন করতে হয় - বলুন, এটি অবস্থান পরিবর্তন করে - ব্রাউজারটিকে তখন ফিরে যেতে হবে এবং কী আঁকতে হবে তা পুনরায় কাজ করতে হবে।

পারফরম্যান্সে সাহায্য করার জন্য, ব্রাউজারটি নতুন যৌগিক স্তর তৈরি করে যা ক্যানভাসের উপরে স্তরযুক্ত। এগুলি কিছুটা পোস্ট-ইট নোটের মতো: একটিকে ঘুরিয়ে ঘুরিয়ে এটি পরিবর্তন করা সামগ্রিক ক্যানভাসে বিশাল প্রভাব ফেলে না। opacity , transform এবং will-change সহ উপাদানগুলির জন্য একটি নতুন যৌগিক স্তর তৈরি করা হয়েছে কারণ এগুলি পরিবর্তন হওয়ার খুব সম্ভাবনা রয়েছে, তাই ব্রাউজারটি শৈলী সমন্বয় প্রয়োগ করার জন্য GPU ব্যবহার করে পরিবর্তনটি যথাসম্ভব কার্যকরী কিনা তা নিশ্চিত করে।

সম্পদ

আপনার উপলব্ধি পরীক্ষা করুন

জেড-ইনডেক্স সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>

কোন নিবন্ধটি ডিফল্টভাবে শীর্ষে রয়েছে?

1
এটা খুব পিছনে আছে.
2
আবার চেষ্টা কর!
3
আবার চেষ্টা কর!
4
ডকুমেন্টে সবশেষে উপরে বসে আছে!

যদি জেড-ইনডেক্স কাজ না করে, তাহলে আপনার উপাদানে কোন সম্পত্তি পরিদর্শন করা উচিত?

display
কেন z-index কাজ করছে না তার জন্য সম্ভাব্য সম্পত্তি নয়।
relative
এটি একটি CSS মান, একটি সম্পত্তি নয়।
position
নিশ্চিত করুন যে এটি static ছাড়া অন্য কিছুতে সেট করা আছে।
animation
কেন z-index কাজ করছে না তার জন্য সম্ভাব্য সম্পত্তি নয়।

ফ্লেক্সবক্স এবং গ্রিড কি position: relative ?

হ্যাঁ
এই ধরনের প্রদর্শনের প্রয়োজন নেই।
না
একটি flexbox বা গ্রিড লেআউটের ভিতরে z-index ব্যবহার করা position: relative ।