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>
কোন নিবন্ধটি ডিফল্টভাবে শীর্ষে রয়েছে?
যদি জেড-ইনডেক্স কাজ না করে, তাহলে আপনার উপাদানে কোন সম্পত্তি পরিদর্শন করা উচিত?
position
display
relative
animation
ফ্লেক্সবক্স এবং গ্রিড কি position: relative
?