আপনি কি কখনও আপনার CSS-এর একটি উপাদানে z-index: 99999 সেট করেছেন এবং এটি অন্যান্য উপাদানের উপরে আসে না? একটি বড় মান যেটি সহজেই সেই উপাদানটিকে অন্য যেকোনো কিছুর উপরে দৃশ্যমানভাবে স্থাপন করতে হবে, ধরে নিই যে সমস্ত ভিন্ন উপাদান হয় কম মানতে সেট করা হয়েছে বা একেবারেই সেট করা হয়নি। একটি ওয়েবপেজ সাধারণত দ্বি-মাত্রিক স্পেসে উপস্থাপন করা হয়; যাইহোক, নির্দিষ্ট CSS বৈশিষ্ট্য প্রয়োগ করে, গভীরতা বোঝাতে একটি কাল্পনিক z-অক্ষ সমতল চালু করা হয়। এই সমতলটি স্ক্রিনের সাথে লম্ব, এবং এটি থেকে, ব্যবহারকারী উপাদানগুলির ক্রম উপলব্ধি করে, একটির উপরে একটি। কাল্পনিক z-অক্ষের পিছনে ধারণা, স্ট্যাক করা উপাদান সম্পর্কে ব্যবহারকারীর ধারণা, যে CSS বৈশিষ্ট্যগুলি যা এটি তৈরি করে তা একত্রিত করে যাকে আমরা স্ট্যাকিং প্রসঙ্গ বলি। আমরা কীভাবে একটি ওয়েবপৃষ্ঠায় উপাদানগুলিকে "স্ট্যাক করা" সম্পর্কে কথা বলতে যাচ্ছি, স্ট্যাকিং ক্রম কী নিয়ন্ত্রণ করে এবং প্রয়োজনে উপাদানগুলিকে "আনস্ট্যাক" করার ব্যবহারিক পদ্ধতির বিষয়ে কথা বলতে যাচ্ছি। স্ট্যাকিং প্রসঙ্গ সম্পর্কে আপনার ওয়েবপৃষ্ঠাটিকে ডেস্ক হিসাবে কল্পনা করুন। আপনি এইচটিএমএল উপাদান যোগ করার সাথে সাথে, আপনি ডেস্কে একের পর এক কাগজের টুকরো বিছিয়ে দিচ্ছেন। স্থাপিত কাগজের শেষ টুকরোটি সাম্প্রতিক যোগ করা HTML উপাদানের সমতুল্য, এবং এটি তার আগে রাখা অন্যান্য সমস্ত কাগজের উপরে বসে। এটি স্বাভাবিক নথির প্রবাহ, এমনকি নেস্টেড উপাদানগুলির জন্যও। ডেস্ক নিজেই রুট স্ট্যাকিং প্রসঙ্গ উপস্থাপন করে, উপাদান দ্বারা গঠিত, যা অন্যান্য সমস্ত ফোল্ডার ধারণ করে। এখন, নির্দিষ্ট CSS বৈশিষ্ট্যগুলি কার্যকর হয়। অবস্থান (z-সূচক সহ), অস্বচ্ছতা, রূপান্তর এবং ধারণ করার মতো বৈশিষ্ট্যগুলি একটি ফোল্ডারের মতো কাজ করে। এই ফোল্ডারটি একটি উপাদান এবং এর সমস্ত শিশু নেয়, সেগুলিকে মূল স্ট্যাক থেকে বের করে এবং একটি পৃথক সাব-স্ট্যাকে গোষ্ঠীবদ্ধ করে, যাকে আমরা স্ট্যাকিং প্রসঙ্গ বলি। অবস্থানকৃত উপাদানগুলির জন্য, এটি ঘটে যখন আমরা স্বয়ংক্রিয় ছাড়া অন্য একটি z-সূচক মান ঘোষণা করি। অস্বচ্ছতা, রূপান্তর এবং ফিল্টারের মতো বৈশিষ্ট্যগুলির জন্য, নির্দিষ্ট মান প্রয়োগ করা হলে স্ট্যাকিং প্রসঙ্গ স্বয়ংক্রিয়ভাবে তৈরি হয়।
এটি বোঝার চেষ্টা করুন: একবার কাগজের টুকরো (অর্থাৎ, একটি শিশু উপাদান) একটি ফোল্ডারের ভিতরে (অর্থাৎ, পিতামাতার স্ট্যাকিং প্রসঙ্গ), এটি কখনই সেই ফোল্ডার থেকে বেরিয়ে আসতে পারে না বা অন্য ফোল্ডারে কাগজগুলির মধ্যে স্থাপন করা যায় না। এর z-index এখন শুধুমাত্র তার নিজস্ব ফোল্ডারের মধ্যেই প্রাসঙ্গিক।
নীচের দৃষ্টান্তে, কাগজ B এখন ফোল্ডার B এর স্ট্যাকিং প্রেক্ষাপটের মধ্যে রয়েছে এবং ফোল্ডারের অন্যান্য কাগজপত্রের সাথেই অর্ডার করা যেতে পারে।
কল্পনা করুন, যদি আপনি চান, আপনার ডেস্কে দুটি ফোল্ডার আছে:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
মার্কআপটি একটু আপডেট করা যাক। ভিতরে ফোল্ডার A হল একটি বিশেষ পৃষ্ঠা, z-index: 9999. Folder B এর ভিতরে একটি প্লেইন পেজ, z-index: 5।
.বিশেষ-পৃষ্ঠা { z-সূচক: 9999; } প্লেইন-পৃষ্ঠা { z-সূচক: 5; }
কোন পৃষ্ঠা উপরে আছে? এটি ফোল্ডার B-এর .plain-পৃষ্ঠা। ব্রাউজার চাইল্ড পেপার উপেক্ষা করে এবং প্রথমে দুটি ফোল্ডারকে স্ট্যাক করে। এটি ফোল্ডার B (z-index: 2) দেখে এবং ফোল্ডার A (z-index: 1) এর উপরে রাখে কারণ আমরা জানি যে দুটি একের চেয়ে বড়। ইতিমধ্যে, .special-পৃষ্ঠাটি z-index-এ সেট করা হয়েছে: 9999 পৃষ্ঠা স্ট্যাকের নীচে রয়েছে যদিও এটির z-সূচক সর্বোচ্চ সম্ভাব্য মান সেট করা হয়েছে। স্ট্যাকিং প্রসঙ্গগুলিও নেস্ট করা যেতে পারে (ফোল্ডারের ভিতরে ফোল্ডার), একটি "পরিবার গাছ" তৈরি করে। একই নীতি প্রযোজ্য: একটি শিশু তার পিতামাতার ফোল্ডার থেকে পালাতে পারে না। এখন যেহেতু আপনি বুঝতে পেরেছেন যে স্ট্যাকিং প্রসঙ্গগুলি ফোল্ডারগুলির মতো আচরণ করে যেগুলি স্তরগুলিকে গোষ্ঠীভুক্ত করে এবং স্তরগুলিকে পুনর্বিন্যাস করে, এটি জিজ্ঞাসা করা উচিত: কেন নির্দিষ্ট বৈশিষ্ট্যগুলি - যেমন রূপান্তর এবং অস্বচ্ছতা - নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে? এখানে জিনিস: এই বৈশিষ্ট্যগুলি স্ট্যাকিং প্রসঙ্গ তৈরি করে না কারণ তারা দেখতে কেমন; ব্রাউজারটি হুডের নীচে কীভাবে কাজ করে তার কারণে তারা এটি করে। আপনি যখন রূপান্তর, অস্বচ্ছতা, ফিল্টার বা দৃষ্টিকোণ প্রয়োগ করেন, তখন আপনি ব্রাউজারকে বলছেন, "আরে, এই উপাদানটি নড়াচড়া, ঘোরাতে বা বিবর্ণ হতে পারে, তাই প্রস্তুত থাকুন!"
আপনি যখন এই বৈশিষ্ট্যগুলি ব্যবহার করেন, ব্রাউজারটি আরও দক্ষতার সাথে রেন্ডারিং পরিচালনা করতে একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করে। এটি ব্রাউজারকে অ্যানিমেশন, রূপান্তর এবং ভিজ্যুয়াল ইফেক্টগুলিকে স্বাধীনভাবে পরিচালনা করার অনুমতি দেয়, এই উপাদানগুলি পৃষ্ঠার বাকি অংশগুলির সাথে কীভাবে ইন্টারঅ্যাক্ট করে তা পুনঃগণনা করার প্রয়োজনীয়তা হ্রাস করে৷ এটিকে ব্রাউজার বলে মনে করুন, "আমি এই ফোল্ডারটি আলাদাভাবে পরিচালনা করব যাতে প্রতিবার এটির ভিতরে কিছু পরিবর্তন করার সময় আমাকে পুরো ডেস্কটি রদবদল করতে হবে না।" কিন্তু আছেএকটি পার্শ্ব প্রতিক্রিয়া। ব্রাউজার একবার একটি উপাদানকে তার নিজস্ব স্তরে তুলে নিলে, এটিকে অবশ্যই এর মধ্যে থাকা সমস্ত কিছুকে "সমতল" করতে হবে, একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করতে হবে। এটি আলাদাভাবে পরিচালনা করার জন্য ডেস্ক থেকে একটি ফোল্ডার নেওয়ার মতো; ফোল্ডারের ভিতরের সবকিছুই গোষ্ঠীবদ্ধ হয়ে যায়, এবং ব্রাউজার এখন এটিকে একটি একক হিসাবে বিবেচনা করে যখন সিদ্ধান্ত নেওয়া হয় কোনটির উপরে কী আছে। তাই যদিও রূপান্তর এবং অস্বচ্ছতা বৈশিষ্ট্যগুলি দৃশ্যত উপাদানগুলিকে স্ট্যাক করার উপায়কে প্রভাবিত করতে পারে না, তারা তা করে এবং এটি কর্মক্ষমতা অপ্টিমাইজেশনের জন্য। অন্যান্য অনেক CSS বৈশিষ্ট্য একই কারণে স্ট্যাকিং প্রসঙ্গ তৈরি করতে পারে। আপনি যদি আরও গভীরে খনন করতে চান তাহলে MDN একটি সম্পূর্ণ তালিকা প্রদান করে৷ বেশ কয়েকটি আছে, যা শুধুমাত্র অজান্তেই একটি স্ট্যাকিং প্রসঙ্গ তৈরি করা কতটা সহজ তা বোঝায়। "আনস্ট্যাকিং" সমস্যা স্ট্যাকিং সমস্যা অনেক কারণে দেখা দিতে পারে, কিন্তু কিছু অন্যদের তুলনায় বেশি সাধারণ। মডেল উপাদানগুলি হল একটি ক্লাসিক প্যাটার্ন কারণ তাদের অন্যান্য সমস্ত উপাদানের উপরে একটি শীর্ষ স্তরে উপাদানটিকে "খোলা" করার জন্য টগল করার প্রয়োজন হয়, তারপর এটি "বন্ধ" হলে উপরের স্তর থেকে এটি সরানো হয়। আমি মোটামুটি আত্মবিশ্বাসী যে আমরা সকলেই এমন একটি পরিস্থিতির মধ্যে পড়েছি যেখানে আমরা একটি মডেল খুলি এবং যে কারণেই হোক না কেন, এটি প্রদর্শিত হয় না। এটি সঠিকভাবে খোলেনি এমন নয়, তবে স্ট্যাকিং প্রসঙ্গের নীচের স্তরে এটি দৃশ্যের বাইরে। এটি আপনাকে অবাক করে দেয় "কেমন করে?" যেহেতু আপনি সেট করেছেন:
.ওভারলে { অবস্থান: স্থির; /* স্ট্যাকিং প্রসঙ্গ তৈরি করে */ z-সূচক: 1; /* উপাদানটি অন্য সবকিছুর উপরে একটি স্তরে রাখে */ ইনসেট: 0; প্রস্থ: 100%; উচ্চতা: 100vh; overflow: hidden; ব্যাকগ্রাউন্ড-রঙ: #00000080; }
এটি সঠিক দেখায়, কিন্তু যদি মোডাল ট্রিগার সহ অভিভাবক উপাদানটি অন্য অভিভাবক উপাদানের মধ্যে একটি শিশু উপাদান হয় যা z-সূচীতেও সেট করা আছে: 1, যা প্রযুক্তিগতভাবে মোডালটিকে প্রধান ফোল্ডার দ্বারা অস্পষ্ট একটি সাবলেয়ারে রাখে। আসুন সেই নির্দিষ্ট দৃশ্যকল্প এবং অন্যান্য কয়েকটি সাধারণ স্ট্যাকিং-প্রসঙ্গ ত্রুটিগুলি দেখুন। আমি মনে করি আপনি অজান্তে স্ট্যাকিং প্রসঙ্গ তৈরি করা কতটা সহজ তা নয়, তবে কীভাবে সেগুলিকে অব্যবস্থাপনা করা যায় তাও দেখতে পাবেন। এছাড়াও, আপনি কীভাবে একটি পরিচালিত অবস্থায় ফিরে আসবেন তা নির্ভর করে পরিস্থিতির উপর। দৃশ্য 1: ট্র্যাপড মডেল
আপনি অবিলম্বে একটি নিম্ন-স্তরের স্তরে আটকে থাকা আপনার মোডাল দেখতে পারেন এবং পিতামাতাকে সনাক্ত করতে পারেন। ব্রাউজার এক্সটেনশন স্মার্ট ডেভেলপাররা সাহায্য করার জন্য এক্সটেনশন তৈরি করেছে। এই "CSS স্ট্যাকিং কনটেক্সট ইন্সপেক্টর" Chrome এক্সটেনশনের মতো টুলগুলি আপনার DevTools-এ একটি অতিরিক্ত z-index ট্যাব যোগ করে যা আপনাকে স্ট্যাকিং প্রসঙ্গ তৈরি করে এমন উপাদানগুলির সম্পর্কে তথ্য দেখায়।
IDE এক্সটেনশন এমনকি আপনি VS কোডের জন্য এইরকম একটি এক্সটেনশনের মাধ্যমে বিকাশের সময় সমস্যাগুলি চিহ্নিত করতে পারেন, যা সরাসরি আপনার সম্পাদকে সম্ভাব্য স্ট্যাকিং প্রসঙ্গ সমস্যাগুলি হাইলাইট করে।
আনস্ট্যাক করা এবং নিয়ন্ত্রণ পুনরুদ্ধার করা আমরা মূল কারণ চিহ্নিত করার পরে, পরবর্তী পদক্ষেপটি এটি মোকাবেলা করা। এই সমস্যাটি মোকাবেলা করার জন্য আপনি বেশ কয়েকটি পন্থা নিতে পারেন এবং আমি সেগুলিকে ক্রমানুসারে তালিকাভুক্ত করব। আপনি যে কোনো স্তরে যে কাউকে বেছে নিতে পারেন, যদিও; কেউ অভিযোগ বা বাধা দিতে পারে না। HTML স্ট্রাকচার পরিবর্তন করুন এটি সর্বোত্তম ফিক্স হিসাবে বিবেচিত হয়। আপনি একটি স্ট্যাকিং প্রসঙ্গ সমস্যা চালানোর জন্য, আপনি আপনার HTML মধ্যে মজার অবস্থানে কিছু উপাদান স্থাপন করা আবশ্যক. পৃষ্ঠাটি পুনর্গঠন করা আপনাকে DOM-কে পুনরায় আকার দিতে এবং স্ট্যাকিং প্রসঙ্গ সমস্যা দূর করতে সাহায্য করবে। সমস্যাযুক্ত উপাদানটি খুঁজুন এবং এইচটিএমএল মার্কআপে ট্র্যাপিং উপাদান থেকে এটি সরান। উদাহরণস্বরূপ, আমরা .modal-কন্টেইনারটিকে হেডারের বাইরে সরিয়ে এবং নিজে থেকেই
উপাদানে স্থাপন করে প্রথম দৃশ্যকল্প, "দ্য ট্র্যাপড মডেল" সমাধান করতে পারি।এই বিষয়বস্তুর 2-এর একটি z-সূচী রয়েছে এবং এখনও মোডালটি কভার করবে না।হেডার
প্রধান বিষয়বস্তু
আপনি যখন "ওপেন মোডাল" বোতামে ক্লিক করেন, তখন মোডালটি অন্য সব কিছুর সামনে অবস্থান করা হয় যেমনটি হওয়ার কথা। পেন দৃশ্য 1 দেখুন: শোয়োম্বো গ্যাব্রিয়েল আয়োমাইডের ট্র্যাপড মডেল (সমাধান) [কাঁটাযুক্ত]। সামঞ্জস্য করুনCSS-এ প্যারেন্ট স্ট্যাকিং প্রসঙ্গ যদি উপাদানটি এমন হয় যে আপনি বিন্যাসটি না ভেঙে সরাতে পারবেন না? সমস্যাটি সমাধান করা ভাল: অভিভাবক প্রসঙ্গটি প্রতিষ্ঠা করেন। প্রসঙ্গটি ট্রিগার করার জন্য দায়ী CSS সম্পত্তি (বা বৈশিষ্ট্য) খুঁজুন এবং এটি সরান। যদি এটির একটি উদ্দেশ্য থাকে এবং এটি অপসারণ করা না যায়, তাহলে পুরো ধারকটি উত্তোলনের জন্য পিতামাতাকে তার ভাইবোন উপাদানগুলির চেয়ে উচ্চতর z-সূচক মান দিন৷ একটি উচ্চতর z-সূচক মানের সাথে, মূল ধারকটি শীর্ষে চলে যায় এবং এর শিশুরা ব্যবহারকারীর কাছাকাছি উপস্থিত হয়। আমরা "নিমজ্জিত ড্রপডাউন" পরিস্থিতিতে যা শিখেছি তার উপর ভিত্তি করে, আমরা ড্রপডাউনটিকে নেভিবার থেকে সরাতে পারি না; এটা কোন অর্থে হবে না। যাইহোক, আমরা .navbar কন্টেইনারের z-index এর মান .content এলিমেন্টের z-index মানের থেকে বড় করতে পারি। .navbar { পটভূমি: #333; /* z-সূচক: 1; */ z-সূচক: 3; অবস্থান: আপেক্ষিক; }
এই পরিবর্তনের সাথে, .ড্রপডাউন-মেনু এখন কোন সমস্যা ছাড়াই বিষয়বস্তুর সামনে উপস্থিত হবে। পেন দৃশ্যকল্প 2 দেখুন: শোয়োম্বো গ্যাব্রিয়েল আয়োমাইড দ্বারা নিমজ্জিত ড্রপডাউন (সমাধান) [কাঁটাযুক্ত]। পোর্টাল ব্যবহার করে দেখুন, যদি একটি ফ্রেমওয়ার্ক ব্যবহার করেন React বা Vue-এর মতো ফ্রেমওয়ার্কগুলিতে, একটি পোর্টাল হল এমন একটি বৈশিষ্ট্য যা আপনাকে DOM-এ তার স্বাভাবিক অভিভাবক শ্রেণিবিন্যাসের বাইরে একটি উপাদান রেন্ডার করতে দেয়। পোর্টালগুলি আপনার উপাদানগুলির জন্য একটি টেলিপোর্টেশন ডিভাইসের মতো৷ তারা আপনাকে নথির যেকোন জায়গায় একটি উপাদানের HTML রেন্ডার করতে দেয় (সাধারণত ডানদিকে document.body) যখন এটিকে প্রপস, স্টেট এবং ইভেন্টগুলির জন্য এটির মূল অভিভাবকের সাথে যৌক্তিকভাবে সংযুক্ত থাকে। এটি স্ট্যাকিং কনটেক্সট ট্র্যাপ থেকে বেরিয়ে আসার জন্য উপযুক্ত কারণ রেন্ডার করা আউটপুট আক্ষরিকভাবে সমস্যাযুক্ত প্যারেন্ট কন্টেইনারের বাইরে প্রদর্শিত হয়। ReactDOM.createPortal( <টুলটিপ />, document.body );
এটি নিশ্চিত করে যে আপনার ড্রপডাউন সামগ্রীটি তার পিতামাতার পিছনে লুকানো নেই, এমনকি যদি অভিভাবকের ওভারফ্লো থাকে: লুকানো বা কম z-সূচক। "দ্য ক্লিপড টুলটিপ" দৃশ্যে আমরা আগে দেখেছি, আমি ওভারফ্লো থেকে টুলটিপকে উদ্ধার করতে একটি পোর্টাল ব্যবহার করেছি: লুকানো ক্লিপটি ডকুমেন্ট বডিতে স্থাপন করে এবং কন্টেইনারের মধ্যে ট্রিগারের উপরে অবস্থান করে। পেন দৃশ্য 3 দেখুন: শোয়োম্বো গ্যাব্রিয়েল আয়োমাইডের ক্লিপড টুলটিপ (সমাধান) [কাঁটাযুক্ত]। পার্শ্ব প্রতিক্রিয়া ছাড়াই স্ট্যাকিং প্রসঙ্গ উপস্থাপন করা হচ্ছে পূর্ববর্তী বিভাগে ব্যাখ্যা করা সমস্ত পন্থা সমস্যাযুক্ত স্ট্যাকিং প্রসঙ্গ থেকে উপাদানগুলিকে "আনস্ট্যাকিং" করার লক্ষ্যে, তবে এমন কিছু পরিস্থিতি রয়েছে যেখানে আপনার আসলে একটি স্ট্যাকিং প্রসঙ্গ তৈরি করতে হবে বা করতে হবে। একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করা সহজ, কিন্তু সমস্ত পন্থা একটি পার্শ্ব প্রতিক্রিয়া সহ আসে। যে, বিচ্ছিন্নতা ব্যবহার ব্যতীত: বিচ্ছিন্ন। যখন একটি উপাদানের উপর প্রয়োগ করা হয়, তখন সেই উপাদানের সন্তানদের স্ট্যাকিং প্রসঙ্গ প্রতিটি শিশুর সাথে সম্পর্কিত এবং সেই প্রেক্ষাপটের মধ্যে নির্ধারিত হয়, এর বাইরের উপাদানগুলির দ্বারা প্রভাবিত না হয়ে। একটি ক্লাসিক উদাহরণ হল সেই উপাদানটিকে একটি নেতিবাচক মান নির্ধারণ করা, যেমন z-সূচক: -1। কল্পনা করুন আপনার একটি .card উপাদান আছে। আপনি একটি আলংকারিক আকৃতি যোগ করতে চান যা .card-এর পাঠ্যের পিছনে, কিন্তু কার্ডের পটভূমির উপরে। কার্ডে স্ট্যাকিং প্রসঙ্গ ছাড়াই, z-index: -1 আকৃতিটিকে রুট স্ট্যাকিং প্রসঙ্গ (পুরো পৃষ্ঠা) এর নীচে পাঠায়। এটি কার্ডের সাদা পটভূমির পিছনে অদৃশ্য হয়ে যায়: শোয়োম্বো গ্যাব্রিয়েল আয়োমাইডের পেন নেগেটিভ জেড-ইনডেক্স (সমস্যা) [কাঁটাযুক্ত] দেখুন। এটি সমাধান করার জন্য, আমরা বিচ্ছিন্নতা ঘোষণা করি: পিতামাতার কার্ডে বিচ্ছিন্নতা: শোয়োম্বো গ্যাব্রিয়েল আয়োমাইডের পেন নেগেটিভ জেড-ইনডেক্স (সমাধান) [কাঁটাযুক্ত] দেখুন। এখন, .card উপাদান নিজেই একটি স্ট্যাকিং প্রসঙ্গ হয়ে ওঠে। যখন এর চাইল্ড এলিমেন্ট — আগে তৈরি করা আলংকারিক আকৃতি — pseudo-element —-এর z-index: -1 থাকে, তখন এটি পিতামাতার স্ট্যাকিং প্রসঙ্গের একেবারে নীচে চলে যায়৷ এটি টেক্সটের পিছনে এবং কার্ডের ব্যাকগ্রাউন্ডের উপরে, উদ্দেশ্য অনুযায়ী পুরোপুরি বসে। উপসংহার মনে রাখবেন: পরের বার যখন আপনার z-সূচক নিয়ন্ত্রণের বাইরে মনে হবে, এটি একটি আটকে থাকা স্ট্যাকিং প্রসঙ্গ। তথ্যসূত্র
স্ট্যাকিং প্রসঙ্গ (MDN) Z-সূচক এবং স্ট্যাকিং প্রসঙ্গ (web.dev) "সিএসএস-এ আইসোলেশন প্রপার্টি দিয়ে কীভাবে একটি নতুন স্ট্যাকিং প্রসঙ্গ তৈরি করবেন", নাটালি পিনা "হোয়াট দ্য হেক, জেড-ইনডেক্স??", জোশ কমউ
SmashingMag-এ আরও পড়া
"বড় প্রজেক্টে CSS Z-Index পরিচালনা", স্টিভেন ফ্রিসন "স্টিকি হেডার এবং পূর্ণ-উচ্চতা উপাদান: একটি জটিল সমন্বয়", ফিলিপ ব্রাউনেন "একটি উপাদান-ভিত্তিক ওয়েব অ্যাপ্লিকেশনে জেড-ইনডেক্স পরিচালনা করা", পাভেল পোমেরান্তসেভ "জেড-ইনডেক্স সিএসএস সম্পত্তি: একটি ব্যাপক চেহারা", লুই লাজারিস
