আপুনি কেতিয়াবা আপোনাৰ CSS ৰ এটা উপাদানত z-index: 99999 সংহতি কৰিছেনে, আৰু ই অন্য উপাদানৰ ওপৰত ওলাই নাহে? ইমান ডাঙৰ মান এটাই সেই উপাদানটোক আন যিকোনো বস্তুৰ ওপৰত দৃশ্যমানভাৱে সহজেই ৰাখিব লাগে, ধৰি লওক সকলো বিভিন্ন উপাদান কম মানত সংহতি কৰা হৈছে বা একেবাৰে সংহতি কৰা হোৱা নাই। ৱেবপেজ এটাক সাধাৰণতে দ্বিমাত্ৰিক স্থানত প্ৰতিনিধিত্ব কৰা হয়; কিন্তু, নিৰ্দিষ্ট CSS বৈশিষ্ট্যসমূহ প্ৰয়োগ কৰি, গভীৰতা প্ৰেৰণ কৰিবলৈ এটা কাল্পনিক z-অক্ষ সমতল প্ৰৱৰ্তন কৰা হয়। এই সমতলটো পৰ্দাৰ লগত লম্বভাৱে থাকে আৰু ইয়াৰ পৰা ব্যৱহাৰকাৰীয়ে মৌলৰ ক্ৰম এটাৰ ওপৰত আনটো অনুভৱ কৰে। কাল্পনিক z-অক্ষৰ আঁৰৰ ধাৰণা, ব্যৱহাৰকাৰীৰ ষ্টেক কৰা উপাদানসমূহৰ ধাৰণা, ইয়াক সৃষ্টি কৰা CSS বৈশিষ্ট্যসমূহে একত্ৰিত হৈ আমি ষ্টেকিং প্ৰসংগ বুলি কোৱাটো গঠন কৰে। আমি এটা ৱেবপেজত উপাদানসমূহ কেনেকৈ “ষ্টেক” কৰা হয়, ষ্টেকিং ক্ৰম কি নিয়ন্ত্ৰণ কৰে, আৰু প্ৰয়োজনৰ সময়ত উপাদানসমূহ “আনষ্টেক” কৰাৰ ব্যৱহাৰিক পদ্ধতিসমূহৰ বিষয়ে ক’ম৷ প্ৰসংগসমূহ ষ্টেক কৰাৰ বিষয়ে আপোনাৰ ৱেবপেজটোক ডেস্ক হিচাপে কল্পনা কৰক। আপুনি HTML উপাদানসমূহ যোগ কৰাৰ লগে লগে, আপুনি কাগজৰ টুকুৰাবোৰ, এটাৰ পিছত এটাকৈ, ডেস্কত ৰাখিছে৷ শেষত ৰখা কাগজৰ টুকুৰাটো শেহতীয়াকৈ যোগ কৰা HTML উপাদানৰ সমতুল্য, আৰু ই ইয়াৰ আগত ৰখা আন সকলো কাগজৰ ওপৰত বহি থাকে। এইটো সাধাৰণ দস্তাবেজ প্ৰবাহ, আনকি নেষ্টেড উপাদানসমূহৰ বাবেও। ডেস্কে নিজেই ৰূট ষ্টেকিং প্ৰসংগক প্ৰতিনিধিত্ব কৰে, উপাদানৰ দ্বাৰা গঠিত, যি অন্য সকলো ফোল্ডাৰ ধাৰণ কৰে। এতিয়া, নিৰ্দিষ্ট CSS বৈশিষ্ট্যসমূহ কামত আহে। অৱস্থান (z-index ৰ সৈতে), অস্পষ্টতা, ৰূপান্তৰ, আৰু ধৰি ৰখাৰ দৰে বৈশিষ্ট্যসমূহে এটা ফোল্ডাৰৰ দৰে কাম কৰে। এই ফোল্ডাৰে এটা উপাদান আৰু ইয়াৰ সকলো সন্তান লয়, মূল ষ্টেকৰ পৰা সিহতক এক্সট্ৰেক্ট কৰে, আৰু সিহতক এটা পৃথক উপ-ষ্টেকত গোট কৰে, আমি ষ্টেকিং প্ৰসংগ বুলি কোৱা সৃষ্টি কৰি। অৱস্থান কৰা উপাদানসমূহৰ বাবে, এইটো হয় যেতিয়া আমি auto ৰ বাহিৰে অন্য এটা z-index মান ঘোষণা কৰো। অস্পষ্টতা, ৰূপান্তৰ, আৰু ফিল্টাৰৰ দৰে বৈশিষ্ট্যসমূহৰ বাবে, ষ্টেকিং প্ৰসংগ স্বয়ংক্ৰিয়ভাৱে সৃষ্টি কৰা হয় যেতিয়া নিৰ্দিষ্ট মানসমূহ প্ৰয়োগ কৰা হয়।
এইটো বুজিবলৈ চেষ্টা কৰক: এবাৰ এটা কাগজৰ টুকুৰা (অৰ্থাৎ, এটা সন্তান উপাদান) এটা ফোল্ডাৰৰ ভিতৰত থাকিলে (অৰ্থাৎ, পিতৃ-মাতৃৰ ষ্টেকিং প্ৰসংগ), ই কেতিয়াও সেই ফোল্ডাৰৰ পৰা ওলাই যাব নোৱাৰে বা এটা বেলেগ ফোল্ডাৰত কাগজৰ মাজত ৰাখিব নোৱাৰে। ইয়াৰ z-index এতিয়া কেৱল ইয়াৰ নিজৰ ফোল্ডাৰৰ ভিতৰতহে প্ৰাসংগিক।
তলৰ চিত্ৰত, কাগজ B এতিয়া ফোল্ডাৰ B ৰ ষ্টেকিং প্ৰসংগৰ ভিতৰত আছে, আৰু কেৱল ফোল্ডাৰৰ অন্য কাগজৰ সৈতে অৰ্ডাৰ কৰিব পাৰি।
যদি আপুনি বিচাৰে, কল্পনা কৰক যে আপোনাৰ ডেস্কত দুটা ফোল্ডাৰ আছে:
.ফোল্ডাৰ-a { z-সূচী: ১; } .ফোল্ডাৰ-b { z-সূচী: ২; }
মাৰ্কআপটো অলপ আপডেট কৰোঁ আহক। ফোল্ডাৰ A ৰ ভিতৰত এটা বিশেষ পৃষ্ঠা, z-index: 9999. ফোল্ডাৰ B ৰ ভিতৰত এটা সাধাৰণ পৃষ্ঠা, z-index: 5.
.বিশেষ-পৃষ্ঠা { z-সূচী: ৯৯৯৯; } .প্লেইন-পৃষ্ঠা { z-সূচী: ৫; }
কোনটো পৃষ্ঠা ওপৰত আছে? ই ফোল্ডাৰ B ত .plain-page। ব্ৰাউজাৰে শিশু কাগজসমূহ আওকাণ কৰে আৰু প্ৰথমে দুটা ফোল্ডাৰ ষ্টেক কৰে। ই ফোল্ডাৰ B (z-index: 2) দেখে আৰু ইয়াক ফোল্ডাৰ A (z-index: 1) ৰ ওপৰত ৰাখে কাৰণ আমি জানো যে দুটা এটাতকৈ ডাঙৰ। ইতিমধ্যে, .special-page z-index: 9999 লে সংহতি কৰা পৃষ্ঠাটো ষ্টেকৰ তলত আছে যদিও ইয়াৰ z-index সৰ্বোচ্চ সম্ভাৱ্য মানলৈ সংহতি কৰা হৈছে। ষ্টেকিং প্ৰসংগসমূহো নেষ্ট কৰিব পাৰি (ফোল্ডাৰসমূহৰ ভিতৰত ফোল্ডাৰসমূহ), এটা “পৰিয়াল গছ” সৃষ্টি কৰি। একেটা নীতি প্ৰযোজ্য: শিশুৱে কেতিয়াও পিতৃ-মাতৃৰ ফোল্ডাৰৰ পৰা সাৰি যাব নোৱাৰে। এতিয়া যেতিয়া আপুনি ষ্টেকিং প্ৰসংগসমূহে স্তৰসমূহক গোট আৰু পুনৰ ক্ৰমবিন্যাস কৰা ফোল্ডাৰৰ দৰে আচৰণ কৰে, সেয়া সুধিবলগীয়া: কিছুমান বৈশিষ্ট্যই — যেনে ৰূপান্তৰ আৰু অস্পষ্টতা — নতুন ষ্টেকিং প্ৰসংগ কিয় সৃষ্টি কৰে? ইয়াত কথাটো হ’ল: এই বৈশিষ্ট্যসমূহে কেনেকুৱা দেখা যায় তাৰ বাবে ষ্টেকিং প্ৰসংগ সৃষ্টি নকৰে; ব্ৰাউজাৰে হুডৰ তলত কেনেকৈ কাম কৰে তাৰ বাবেই তেওঁলোকে ইয়াক কৰে। যেতিয়া আপুনি ৰূপান্তৰ, অস্পষ্টতা, ফিল্টাৰ, বা দৃষ্টিভংগী প্ৰয়োগ কৰে, আপুনি ব্ৰাউজাৰক কৈছে, “হেৰা, এই উপাদানটো লৰচৰ, ঘূৰিব, বা ম্লান হ’ব পাৰে, গতিকে সাজু থাকক!”
যেতিয়া আপুনি এই বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰে, ব্ৰাউজাৰে ৰেণ্ডাৰ অধিক কাৰ্যক্ষমভাৱে পৰিচালনা কৰিবলে এটা নতুন ষ্টেকিং প্ৰসংগ সৃষ্টি কৰে। ই ব্ৰাউজাৰক এনিমেচন, ৰূপান্তৰ, আৰু দৃশ্য প্ৰভাৱসমূহ স্বতন্ত্ৰভাৱে নিয়ন্ত্ৰণ কৰাৰ অনুমতি দিয়ে, এই উপাদানসমূহে পৃষ্ঠাৰ বাকী অংশৰ সৈতে কেনেকৈ পাৰস্পৰিক ক্ৰিয়া কৰে পুনৰ গণনা কৰাৰ প্ৰয়োজনীয়তা হ্ৰাস কৰে। ইয়াক ব্ৰাউজাৰে কোৱাৰ দৰে ভাবিব, “মই এই ফোল্ডাৰটো পৃথকে চম্ভালিম যাতে প্ৰতিবাৰ ইয়াৰ ভিতৰৰ কিবা এটা সলনি হ’লে মই গোটেই ডেস্কখন পুনৰ সলনি কৰিব নালাগে।” কিন্তু আছে৷এটা পাৰ্শ্বক্ৰিয়া। ব্ৰাউজাৰে এবাৰ এটা উপাদানক নিজৰ স্তৰলৈ তুলি ল'লে, ইয়াৰ ভিতৰৰ সকলো বস্তু “ফ্লেট” কৰিব লাগিব, এটা নতুন ষ্টেকিং প্ৰসংগ সৃষ্টি কৰি। ই ডেস্কৰ পৰা এটা ফোল্ডাৰ আঁতৰাই পৃথকে চম্ভালি লোৱাৰ দৰে; সেই ফোল্ডাৰৰ ভিতৰৰ সকলোবোৰ গোট কৰা হয়, আৰু ব্ৰাউজাৰে এতিয়া ইয়াক এটা একক হিচাপে গণ্য কৰে যেতিয়া কিহৰ ওপৰত কি বহিব সেইটো সিদ্ধান্ত লয়। গতিকে যদিও ৰূপান্তৰ আৰু অস্পষ্টতা বৈশিষ্ট্যসমূহে উপাদানসমূহে দৃশ্যমানভাৱে ষ্টেক কৰাৰ ধৰণত প্ৰভাৱ পেলোৱা যেন নালাগিব, সিহঁতে কৰে, আৰু ই পৰিৱেশন অনুকূলনৰ বাবে। অন্য কেইবাটাও CSS বৈশিষ্ট্যইও একে কাৰণত ষ্টেকিং প্ৰসংগ সৃষ্টি কৰিব পাৰে। MDN এ এটা সম্পূৰ্ণ তালিকা প্ৰদান কৰে যদি আপুনি গভীৰভাৱে খন্দাব বিচাৰে। যথেষ্ট সংখ্যক আছে, যিয়ে কেৱল বুজাইছে যে অজানিতে অজানিতে ষ্টেকিং প্ৰসংগ সৃষ্টি কৰাটো কিমান সহজ। “আনষ্টেকিং” সমস্যাটো ষ্টেকিঙৰ সমস্যা বহু কাৰণত হ’ব পাৰে, কিন্তু কিছুমান আনতকৈ বেছি সাধাৰণ। মডাল উপাদানসমূহ এটা ক্লাছিক আৰ্হি কাৰণ ইয়াৰ বাবে উপাদানটোক অন্য সকলো উপাদানৰ ওপৰত এটা ওপৰৰ স্তৰত “খোলা” কৰিবলৈ টগল কৰাৰ প্ৰয়োজন হয়, তাৰ পিছত ইয়াক “বন্ধ” হ’লে ওপৰৰ স্তৰৰ পৰা আঁতৰাই পেলোৱা হয়। মই মোটামুটি নিশ্চিত যে আমি সকলোৱে এনে এটা পৰিস্থিতিত পৰিছো যে আমি এটা মডাল খুলিছো আৰু যি কাৰণতেই নহওক কিয়, সেয়া দেখা নাযায়৷ ই যে সঠিকভাৱে খোলা নাছিল এনে নহয়, কিন্তু ষ্টেকিং প্ৰসংগৰ তলৰ স্তৰত ই দৃশ্যৰ বাহিৰত আছে। ইয়াৰ ফলত আপুনি ভাবিবলৈ বাধ্য হয় “কেনেকৈ?” যিহেতু আপুনি নিৰ্ধাৰণ কৰিছে:
.অভাৰলে { অৱস্থান: স্থিৰ; /* ষ্টেকিং প্ৰসংগ সৃষ্টি কৰে */ z-সূচী: ১; /* উপাদানটোক বাকী সকলোতকৈ ওপৰত এটা স্তৰত ৰাখে */ ইনছেট: 0; প্ৰস্থ: ১০০%; উচ্চতা: ১০০vh; overflow: লুকাই থকা; পটভূমি-ৰং: #00000080; }
এইটো শুদ্ধ দেখা যায়, কিন্তু যদি মডাল ট্ৰিগাৰ ধাৰণ কৰা পিতৃ উপাদানটো অন্য মূল উপাদানৰ ভিতৰত এটা সন্তান উপাদান হয় যি z-index লে সংহতি কৰা হৈছে: 1, ই কাৰিকৰীভাৱে মডালক মূল ফোল্ডাৰৰ দ্বাৰা অস্পষ্ট এটা উপস্তৰত ৰাখে। সেই নিৰ্দিষ্ট পৰিস্থিতি আৰু আন দুটামান সাধাৰণ ষ্টেকিং-প্ৰসংগ ফান্দ চাওঁ আহক। মই ভাবো আপুনি কেৱল দেখিব যে অজানিতে ষ্টেকিং প্ৰসংগ সৃষ্টি কৰাটো কিমান সহজ, কিন্তু ইয়াক কেনেকৈ ভুল ব্যৱস্থাপনা কৰিব পাৰি। লগতে, আপুনি কেনেকৈ পৰিচালিত অৱস্থালৈ ঘূৰি যাব সেয়া পৰিস্থিতিৰ ওপৰত নিৰ্ভৰ কৰে। পৰিস্থিতি ১: আৱদ্ধ মডাল
আপুনি তৎক্ষণাত আপোনাৰ মডাল এটা নিম্ন-স্তৰৰ স্তৰত আবদ্ধ হৈ থকা দেখিব পাৰে আৰু অভিভাৱকক চিনাক্ত কৰিব পাৰে। ব্ৰাউজাৰ সম্প্ৰসাৰণসমূহ স্মাৰ্ট ডেভেলপাৰসকলে সহায় কৰিবলৈ এক্সটেনচন নিৰ্মাণ কৰিছে। এই “CSS ষ্টেকিং প্ৰসংগ পৰিদৰ্শক” Chrome সম্প্ৰসাৰণৰ দৰে সঁজুলিসমূহে আপোনাৰ DevTools ত এটা অতিৰিক্ত z-index টেব যোগ কৰে যাতে আপোনাক এটা ষ্টেকিং প্ৰসংগ সৃষ্টি কৰা উপাদানসমূহৰ বিষয়ে তথ্য দেখুৱাব পাৰে।
IDE সম্প্ৰসাৰণসমূহ আপুনি আনকি VS ক'ডৰ বাবে এইটোৰ দৰে এটা সম্প্ৰসাৰণৰ সৈতে বিকাশৰ সময়ত সমস্যাসমূহ ধৰা পেলাব পাৰে, যি সম্ভাৱ্য ষ্টেকিং প্ৰসংগ সমস্যাসমূহ আপোনাৰ সম্পাদকত প্ৰত্যক্ষভাৱে হাইলাইট কৰে।
আনষ্টেকিং আৰু নিয়ন্ত্ৰণ পুনৰ লাভ কৰা আমি মূল কাৰণটো চিনাক্ত কৰাৰ পিছত, পৰৱৰ্তী পদক্ষেপ হ’ল ইয়াৰ সৈতে মোকাবিলা কৰা। এই সমস্যাটো মোকাবিলা কৰিবলৈ আপুনি কেইবাটাও পন্থা ল’ব পাৰে, আৰু মই সেইবোৰ ক্ৰমত তালিকাভুক্ত কৰিম। যিকোনো স্তৰতে যিকোনো ব্যক্তিক বাছি ল’ব পাৰে, যদিও; কোনেও আনক অভিযোগ বা বাধা দিব নোৱাৰে। HTML গঠন সলনি কৰক ইয়াক অনুকূল সমাধান বুলি গণ্য কৰা হয়। আপুনি এটা ষ্টেকিং প্ৰসংগ সমস্যাত পৰিবলৈ, আপুনি কিছুমান উপাদান আপোনাৰ HTML ৰ ভিতৰত মজাৰ অৱস্থানত স্থাপন কৰিব লাগিব। পৃষ্ঠা পুনৰ্গঠনে আপোনাক DOM পুনৰায় আকৃতি দিব আৰু ষ্টেকিং প্ৰসংগ সমস্যা আঁতৰাবলৈ সহায় কৰিব। সমস্যাজনক উপাদানটো বিচাৰি উলিয়াওক আৰু HTML মাৰ্কআপত ট্ৰেপিং উপাদানৰ পৰা আঁতৰাওক। উদাহৰণস্বৰূপে, আমি প্ৰথম পৰিস্থিতি, “The Trapped Modal,” সমাধান কৰিব পাৰো .modal-container টো হেডাৰৰ বাহিৰলৈ লৈ গৈ আৰু ইয়াক নিজেই
উপাদানত ৰাখি।<হেডাৰ ক্লাছ="হেডাৰ">
শিৰোনামা
<মূল শ্ৰেণী="সামগ্ৰী">মূল বিষয়বস্তু
এই বিষয়বস্তুৰ z-সূচী 2 আৰু এতিয়াও মডাল সামৰি লোৱা নহ'ব।
মডাল শিৰোনাম
এতিয়া, মই একোৱেই আঁৰত নাই। DOM পুনৰ্গঠনৰ ফলত মই ভাল স্থান পাইছো।
যেতিয়া আপুনি “Open Modal” বুটামটো ক্লিক কৰে, মডালটো বাকী সকলো বস্তুৰ সন্মুখত যিদৰে হ’ব লাগে তেনেদৰে স্থাপন কৰা হয়। কলম দৃশ্যপট চাওক 1: আৱদ্ধ মডাল (সমাধান) [forked] Shoyombo গেব্ৰিয়েল Ayomide দ্বাৰা. সামঞ্জস্য কৰক TheCSS ত পিতৃ ষ্টেকিং প্ৰসংগ যদি উপাদানটো এনেকুৱা হয় যিটো আপুনি বিন্যাস ভংগ নকৰাকৈ লৰচৰ কৰিব নোৱাৰে? সমস্যাটো সমাধান কৰাটো ভাল: অভিভাৱকে প্ৰসংগটো প্ৰতিষ্ঠা কৰে। প্ৰসংগ ট্ৰিগাৰ কৰাৰ বাবে দায়বদ্ধ CSS বৈশিষ্ট্য (বা বৈশিষ্ট্যসমূহ) বিচাৰি উলিয়াওক আৰু ইয়াক আঁতৰাওক। যদি ইয়াৰ এটা উদ্দেশ্য আছে আৰু আঁতৰাব নোৱাৰি, গোটেই পাত্ৰটো তুলিবলৈ ইয়াৰ ভাই-ভনী উপাদানসমূহতকৈ পিতৃক এটা উচ্চ z-সূচী মান দিয়ক। এটা উচ্চ z-সূচী মানৰ সৈতে, পিতৃ ধাৰক ওপৰলৈ যায়, আৰু ইয়াৰ সন্তানসকল ব্যৱহাৰকাৰীৰ ওচৰত দেখা দিয়ে। “The Submerged Dropdown” পৰিস্থিতিত আমি যিখিনি শিকিলোঁ তাৰ ভিত্তিত আমি ড্ৰপডাউনটো নেভবাৰৰ বাহিৰলৈ লৈ যাব নোৱাৰো; ইয়াৰ কোনো যুক্তি নাথাকিব৷ কিন্তু আমি .navbar কণ্টেইনাৰৰ z-index মান বৃদ্ধি কৰিব পাৰো যাতে .content উপাদানৰ z-index মানতকৈ বেছি হয়। .navbar { পটভূমি: #৩৩৩; /* z-সূচী: ১; */ z-সূচী: ৩; অৱস্থান: আপেক্ষিক; }
এই পৰিবৰ্তনৰ সৈতে, .ড্ৰপডাউন-মেনু এতিয়া কোনো সমস্যা নোহোৱাকৈ বিষয়বস্তুৰ সন্মুখত ওলায়। কলম দৃশ্যপট চাওক 2: ডুব যোৱা ড্ৰপডাউন (সমাধান) [forked] Shoyombo গেব্ৰিয়েল Ayomide দ্বাৰা. পৰ্টেলসমূহ চেষ্টা কৰক, যদি এটা কাঠামো ব্যৱহাৰ কৰি আছে React বা Vue ৰ দৰে কাঠামোসমূহত, এটা পৰ্টেল এটা বৈশিষ্ট্য যি আপোনাক DOM ত ইয়াৰ সাধাৰণ পিতৃ হাইৰাৰ্কিৰ বাহিৰত এটা উপাদান ৰেণ্ডাৰ কৰিবলৈ দিয়ে। পৰ্টেলসমূহ আপোনাৰ উপাদানসমূহৰ বাবে এটা টেলিপৰ্টেচন ডিভাইচৰ দৰে। সিহঁতে আপোনাক এটা উপাদানৰ HTML দস্তাবেজৰ যিকোনো ঠাইত (সাধাৰণতে document.body ত) ৰেণ্ডাৰ কৰিবলৈ দিয়ে আৰু ইয়াক প্ৰপছ, অৱস্থা, আৰু ইভেন্টৰ বাবে ইয়াৰ মূল পিতৃৰ সৈতে যুক্তিসংগতভাৱে সংযুক্ত কৰি ৰাখে। এইটো ষ্টেকিং প্ৰসংগ ফান্দৰ পৰা পলায়নৰ বাবে নিখুঁত কাৰণ ৰেণ্ডাৰ কৰা আউটপুট আক্ষৰিকভাৱে সমস্যাজনক পিতৃ ধাৰকৰ বাহিৰত দেখা দিয়ে। ReactDOM.পৰ্টেল সৃষ্টি কৰক( <সঁজুলিৰ টিপ />, document.body );
ই নিশ্চিত কৰে যে আপোনাৰ ড্ৰপডাউন বিষয়বস্তু ইয়াৰ পিতৃৰ পিছফালে লুকাই থকা নাই, যদিও পিতৃৰ অভাৰফ্ল’ আছে: লুকাই আছে বা এটা নিম্ন z-সূচী। আমি আগতে চোৱা “ক্লিপ কৰা সঁজুলিটিপ” পৰিস্থিতিত, মই এটা পৰ্টেল ব্যৱহাৰ কৰিছিলোঁ সঁজুলিটিপটোক অভাৰফ্ল’ৰ পৰা উদ্ধাৰ কৰিবলৈ: ডকুমেণ্টৰ মূখ্য অংশত ৰাখি আৰু পাত্ৰৰ ভিতৰত ট্ৰিগাৰৰ ওপৰত ৰাখি লুকাই থকা ক্লিপ। কলম পৰিস্থিতি 3 চাওক: ক্লিপ কৰা সঁজুলিটিপ (সমাধান) [forked] Shoyombo Gabriel Ayomide দ্বাৰা. পাৰ্শ্বক্ৰিয়া অবিহনে ষ্টেকিং প্ৰসংগ প্ৰৱৰ্তন কৰা পূৰ্বৰ বিভাগত ব্যাখ্যা কৰা সকলো পদ্ধতি সমস্যাজনক ষ্টেকিং প্ৰসংগসমূহৰ পৰা উপাদানসমূহ “আনষ্টেকিং” কৰাৰ লক্ষ্যৰে, কিন্তু কিছুমান পৰিস্থিতি আছে য’ত আপুনি প্ৰকৃততে এটা ষ্টেকিং প্ৰসংগ সৃষ্টি কৰিব লাগিব বা কৰিব বিচাৰিব। এটা নতুন ষ্টেকিং প্ৰসংগ সৃষ্টি কৰাটো সহজ, কিন্তু সকলো পদ্ধতি এটা পাৰ্শ্বক্ৰিয়াৰ সৈতে আহে। অৰ্থাৎ পৃথকীকৰণ ব্যৱহাৰ কৰাৰ বাহিৰে: পৃথকীকৰণ। যেতিয়া এটা উপাদানত প্ৰয়োগ কৰা হয়, তেতিয়া সেই উপাদানৰ সন্তানৰ ষ্টেকিং প্ৰসংগ প্ৰতিটো শিশুৰ সাপেক্ষে আৰু সেই প্ৰসংগৰ ভিতৰত নিৰ্ধাৰণ কৰা হয়, ইয়াৰ বাহিৰৰ উপাদানৰ দ্বাৰা প্ৰভাৱিত হোৱাতকৈ। এটা ক্লাছিক উদাহৰণ হ'ল সেই উপাদানটোক এটা ঋণাত্মক মান নিযুক্ত কৰা, যেনে z-index: -1 । কল্পনা কৰক যে আপোনাৰ এটা .card উপাদান আছে। আপুনি এটা সজ্জাগত আকৃতি যোগ কৰিব বিচাৰে যি .কাৰ্ডৰ লিখনীৰ পিছফালে বহি থাকে, কিন্তু কাৰ্ডৰ পটভূমিৰ ওপৰত। কাৰ্ডত এটা ষ্টেকিং প্ৰসংগ অবিহনে, z-index: -1 এ আকৃতিক ৰূট ষ্টেকিং প্ৰসংগৰ তললৈ (গোটেই পৃষ্ঠাটো) পঠায়। ইয়াৰ ফলত ই .card’s বগা পটভূমিৰ আঁৰত অদৃশ্য হৈ পৰে: শ্বোয়ম্বো গেব্ৰিয়েল আয়োমাইডৰ দ্বাৰা পেন নেগেটিভ z-ইণ্ডেক্স (সমস্যা) [forked] চাওক। ইয়াৰ সমাধান কৰিবলৈ আমি পৃথকীকৰণ ঘোষণা কৰোঁ: পিতৃ .কাৰ্ডত পৃথকীকৰণ: শ্বোয়ম্বো গেব্ৰিয়েল আয়োমাইডৰ দ্বাৰা পেন নেগেটিভ z-ইণ্ডেক্স (সমাধান) [forked] চাওক। এতিয়া, .card উপাদানটো নিজেই এটা ষ্টেকিং প্ৰসংগ হৈ পৰে। যেতিয়া ইয়াৰ সন্তান উপাদান — :before pseudo-element ত সৃষ্টি কৰা সজ্জাগত আকৃতি — z-index: -1 থাকে, ই পিতৃৰ ষ্টেকিং প্ৰসংগৰ একেবাৰে তললৈ যায়। ই লিখাৰ পিছফালে আৰু কাৰ্ডৰ পটভূমিৰ ওপৰত নিখুঁতভাৱে বহি থাকে, উদ্দেশ্য অনুসৰি। উপসংহাৰ মনত ৰাখিব: পৰৱৰ্তী সময়ত আপোনাৰ z-index নিয়ন্ত্ৰণৰ বাহিৰত যেন লাগে, ই এটা আৱদ্ধ ষ্টেকিং প্ৰসংগ। তথ্যসূত্ৰসমূহ
ষ্টেকিং প্ৰসংগ (MDN) Z-সূচী আৰু ষ্টেকিং প্ৰসংগসমূহ (web.dev) “CSS ত পৃথকীকৰণ বৈশিষ্ট্যৰ সৈতে এটা নতুন ষ্টেকিং প্ৰসংগ কেনেকৈ সৃষ্টি কৰিব লাগে”, নাটালি পিনা “ৱাট দ্য হেক, জেড-ইণ্ডেক্স??”, জোছ ক’ম’
SmashingMag ত অধিক পঢ়া
“বৃহৎ প্ৰকল্পত চিএছএছ জেড-ইণ্ডেক্স পৰিচালনা”, ষ্টিভেন ফ্ৰিছন “ষ্টিকি হেডাৰছ এণ্ড ফুল-হাইট এলিমেণ্টছ: এ ট্ৰিকি কম্বিনেচন”, ফিলিপ ব্ৰাউনেন “এটা উপাদান-ভিত্তিক ৱেব এপ্লিকেচনত জেড-ইণ্ডেক্স পৰিচালনা”, পাভেল প'মেৰেন্টচেভ “দ্য জেড-ইণ্ডেক্স চিএছএছ প্ৰপাৰ্টি: এ কম্প্ৰেহেন্সিভ লুক”, লুই লাজাৰিছ
