4টি কারণ আপনার z-index কাজ করছে না (এবং কীভাবে এটি ঠিক করবেন)

z-সূচক কি? Z-index হল একটি CSS প্রপার্টি যা আপনাকে HTML এলিমেন্টকে একটির উপরে স্তরে অবস্থান করতে দেয়। এটি প্রথমে সহজ মনে হলেও এটি প্রতারণামূলকভাবে সহজ৷

কিছু অদ্ভুত, অ-স্বজ্ঞাত নিয়ম রয়েছে যা এটিকে আপনার পছন্দ মতো আচরণ করতে পারে না- এমনকি আপনি 999999-এ z-index সেট করলেও!

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

1. একই স্ট্যাকিং প্রসঙ্গে উপাদানগুলি পূর্বের উপাদানগুলির উপরে পরবর্তী উপাদানগুলির সাথে উপস্থিতির ক্রম অনুসারে প্রদর্শিত হবে৷

আমাদের প্রথম উদাহরণে, আমাদের একটি তুলনামূলকভাবে সহজ লেআউট রয়েছে যাতে 3টি প্রধান উপাদান রয়েছে:

• একটি বিড়ালের ছবি
• পাঠ্য সহ একটি সাদা ব্লক
• একই বিড়ালের আরেকটি ছবি

এটির জন্য এখানে HTML মার্কআপ রয়েছে:

<div class="cat-top"></div>
    
<div class="content__block">
  Meow meow meow...
</div>
    
<div class="cat-bottom"></div>

এই লেআউটে, আমরা আদর্শভাবে চাই যে পাঠ্যের সাদা ব্লক উভয় বিড়ালের উপরে থাকুক।

এটি অর্জন করার চেষ্টা করার জন্য, আমরা উভয় বিড়ালের চিত্রের জন্য CSS-এ কিছু নেতিবাচক মার্জিন যোগ করেছি, যাতে তারা সাদা ব্লককে কিছুটা ওভারল্যাপ করে:

.cat-top { 
    margin-bottom: -110px;
}  

.cat-bottom {    
    float: right;
    margin-top: -120px;
}

যাইহোক, এটি এই মত দেখায়:

পেন জেড-ইনডেক্স দেখুন:#1:অবস্থান সেট করুন, #2:প্রাকৃতিক স্ট্যাকিং অর্ডার, #3:কোডপেনে জেসিকার (@thecodercoder) CSS বৈশিষ্ট্য।

প্রথম বিড়ালটি প্রকৃতপক্ষে সাদা কন্টেন্ট ব্লকের নীচে অবস্থিত, ঠিক যেমন আমরা চাই। কিন্তু দ্বিতীয় বিড়ালের ছবি ব্লকের উপরে রাখা হয়েছে!

কেন এটা ঘটছে?

এই আচরণের কারণ হল প্রাকৃতিক স্ট্যাকিং অর্ডার ওয়েবপেজে এই নির্দেশিকাগুলি মূলত নির্ধারণ করে যে কোন উপাদানগুলি উপরে থাকবে এবং কোনটি নীচে থাকবে৷

উপাদানগুলির z-সূচী সেট না থাকলেও, একটি ছড়া এবং কারণ রয়েছে যেগুলি শীর্ষে থাকবে৷

আমাদের ক্ষেত্রে, কোনো উপাদানেরই z-সূচক মান নেই। তাই তাদের স্ট্যাকিং ক্রম তাদের চেহারা ক্রম দ্বারা নির্ধারিত হয়. এই নিয়ম অনুসারে, মার্কআপে পরে আসা উপাদানগুলি তাদের আগে আসা উপাদানগুলির উপরে থাকবে৷

(আপনি এখানে মোজিলা ডেভেলপার নেটওয়ার্কে স্ট্যাকিং অর্ডার নির্দেশিকা পড়তে পারেন।)

বিড়াল এবং সাদা ব্লকের সাথে আমাদের উদাহরণে, তারা এই নিয়ম মেনে চলছে। এই কারণেই প্রথম বিড়ালটি সাদা ব্লক উপাদানের নীচে এবং সাদা ব্লকটি দ্বিতীয় বিড়ালের নীচে রয়েছে৷

ঠিক আছে, স্ট্যাকিং অর্ডার সব ঠিকঠাক এবং ভাল, কিন্তু কিভাবে আমরা সিএসএস ঠিক করব যাতে দ্বিতীয় বিড়ালটি সাদা ব্লকের নীচে থাকে?

আসুন দ্বিতীয় কারণটি দেখি:

2. উপাদানটির অবস্থান সেট করা নেই

অন্যান্য নির্দেশিকাগুলির মধ্যে একটি যা স্ট্যাকিং অর্ডার নির্ধারণ করে তা হল একটি উপাদানের অবস্থান সেট করা আছে কিনা।

একটি উপাদানের জন্য অবস্থান সেট করতে, CSS position যোগ করুন static ছাড়া অন্য কিছুর সম্পত্তি , যেমন relative অথবা absolute . (আপনি আমার লেখা এই নিবন্ধে এটি সম্পর্কে আরও পড়তে পারেন।)

এই নিয়ম অনুসারে, অবস্থানহীন উপাদানগুলির উপরে অবস্থান করা উপাদানগুলি প্রদর্শিত হবে।

তাই সাদা ব্লককে position: relative হিসেবে সেট করুন , এবং দুটি বিড়াল উপাদানকে অবস্থানবিহীন রেখে স্ট্যাকিং ক্রমানুসারে বিড়ালের উপরে সাদা ব্লক রাখবে।

এটি দেখতে এইরকম হবে- আপনি উপরের কোডপেনের সাথেও খেলতে পারেন।

উহু!

এখন, আমরা পরবর্তী যে কাজটি করতে চাই তা হল transform ব্যবহার করে নীচের বিড়ালটিকে উল্টো করে ঘোরানো। সম্পত্তি এইভাবে, দুটি বিড়ালই সাদা ব্লকের নীচে থাকবে, শুধুমাত্র তাদের মাথা বাইরে থাকবে।

কিন্তু এটি করার ফলে আরও z-index হতে পারে - সম্পর্কিত বিভ্রান্তি। আমরা পরবর্তী অংশে সমস্যা এবং সমাধানের সমাধান করব।

3. অস্বচ্ছতা বা রূপান্তর মত কিছু CSS বৈশিষ্ট্য সেট করা উপাদানটিকে একটি নতুন স্ট্যাকিং প্রসঙ্গে রাখবে।

আমরা যেমন উল্লেখ করেছি, আমরা নীচের বিড়ালটিকে উল্টাতে চাই। এটি সম্পন্ন করার জন্য, আমরা transform: rotate(180deg) যোগ করব .

.cat-bottom { 
    float: right;
    margin-top: -120px;
    transform: rotate(180deg);
}

কিন্তু এর ফলে নীচের বিড়ালটিকে আবার সাদা ব্লকের উপরে প্রদর্শিত হবে!

এখানে কি হচ্ছে?

আপনি প্রায়ই এই সমস্যায় নাও পড়তে পারেন, তবে স্ট্যাকিং অর্ডারের আরেকটি দিক হল কিছু CSS বৈশিষ্ট্য যেমন transform অথবা opacity উপাদানটিকে তার নিজস্ব, নতুন স্ট্যাকিং প্রসঙ্গে রাখবে।

এর মানে হল transform যোগ করা .cat-bottom-এ উপাদান এটিকে এমন আচরণ করে যেন এটির একটি z-index আছে 0 এর। যদিও এর position নেই অথবা z-index সব সেট! (W3.org-এ কিছু তথ্যপূর্ণ কিন্তু ঘন ডকুমেন্টেশন রয়েছে যে এটি কিভাবে opacity এর সাথে কাজ করে সম্পত্তি)

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

কিন্তু যেহেতু .bottom-cat উপাদানটি এমনভাবে কাজ করছে যেন এটি তুলনামূলকভাবে z-index: 0 এর সাথে অবস্থান করে , রূপান্তরিত করে এটিকে সাদা ব্লকের উপরে স্থাপন করা হয়েছে।

এর সমাধান হল position: relative সেট করা এবং স্পষ্টভাবে z-index সেট করুন অন্তত সাদা ব্লকে। আপনি আরও এক ধাপ এগিয়ে position: relative সেট করতে পারেন এবং একটি নিম্ন z-index বিড়ালের উপাদানগুলিতে, শুধুমাত্র অতিরিক্ত নিরাপদ হতে।

.content__block {
    position: relative;
    z-index: 2;
}
.cat-top, .cat-bottom {
    position: relative;
    z-index: 1;
}

আমার মতে, এটি করা হলে সবগুলো মৌলিক z-সূচক সমস্যা সমাধান হবে।

এখন, চলুন আমাদের শেষ কারণের দিকে এগিয়ে যাই যে আপনার z-index কাজ করছে না। এটি একটু বেশি জটিল, কারণ এতে পিতামাতা এবং শিশু উপাদান জড়িত।

4. উপাদানটি তার অভিভাবকের জেড-ইনডেক্স স্তরের কারণে নিম্ন স্ট্যাকিং প্রসঙ্গে রয়েছে

এর জন্য আমাদের কোড উদাহরণ পরীক্ষা করে দেখুন:

পেন জেড-ইনডেক্স দেখুন:কোডপেনে জেসিকার (@thecodercoder) #4 ভিন্ন স্ট্যাকিং প্রসঙ্গ।

এখানে আমাদের যা আছে:নিয়মিত কন্টেন্ট সহ একটি সাধারণ ওয়েবপেজ এবং একটি গোলাপী সাইড ট্যাব যা "প্রতিক্রিয়া পাঠান" বলে যেটি বিষয়বস্তুর শীর্ষে অবস্থিত৷

তারপর, আপনি যখন বিড়ালের ফটোতে ক্লিক করেন, তখন একটি স্বচ্ছ ধূসর পটভূমি ওভারলে সহ একটি মডেল উইন্ডো খোলে৷

যাইহোক, এমনকি যখন মডেল উইন্ডো খোলা থাকে, তখনও পাশের ট্যাবটি ধূসর ওভারলে এর উপরে থাকে। আমরা পাশের ট্যাব সহ সবকিছুতে ওভারলে প্রদর্শন করতে চাই।

চলুন প্রশ্ন করা উপাদানগুলির জন্য CSS-এর দিকে নজর দেওয়া যাক:

.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}

সমস্ত উপাদানের অবস্থান সেট করা আছে, এবং পাশের ট্যাবে একটি z-index আছে 5 এর মধ্যে, যা এটিকে বিষয়বস্তুর উপাদানের শীর্ষে রাখে, যা z-index: 1-এ রয়েছে .

তারপর, মডেলটিতে z-index: 100 আছে যা উচিত এটিকে পাশের ট্যাবের উপরে z-index: 5 এ রাখুন . কিন্তু পরিবর্তে, মডেল ওভারলে পাশের ট্যাবের নীচে।

কেন এটা ঘটছে?

পূর্বে, আমরা কিছু বিষয়কে সম্বোধন করেছি যা স্ট্যাকিং প্রসঙ্গে যায়, যেমন উপাদানটির অবস্থান সেট করা আছে কিনা, সেইসাথে মার্কআপে এর ক্রম।

কিন্তু স্ট্যাকিং প্রসঙ্গের আরেকটি দিক হল যে একটি শিশু উপাদান তার পিতামাতার স্ট্যাকিং প্রসঙ্গে সীমাবদ্ধ৷

আসুন প্রশ্ন করা তিনটি উপাদানকে ঘনিষ্ঠভাবে দেখি।

এখানে আমাদের মার্কআপ আছে:

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

মার্কআপের দিকে তাকিয়ে, আমরা দেখতে পাচ্ছি যে বিষয়বস্তু এবং পার্শ্ব ট্যাব উপাদানগুলি ভাইবোন। অর্থাৎ, তারা মার্কআপে একই স্তরে বিদ্যমান (এটি z-সূচক স্তর থেকে আলাদা)। এবং মডেল হল কন্টেন্ট এলিমেন্টের একটি চাইল্ড এলিমেন্ট।

কারণ মডেলটি বিষয়বস্তুর উপাদানের ভিতরে রয়েছে, এটির z-index 100 এর শুধুমাত্র তার অভিভাবক, বিষয়বস্তু উপাদানের ভিতরে একটি প্রভাব রয়েছে। উদাহরণস্বরূপ, যদি অন্যান্য শিশু উপাদান থাকে যারা মডেলের ভাইবোন ছিল, তাদের z-index মানগুলি তাদের একে অপরের উপরে বা নীচে রাখবে।

কিন্তু z-index এই শিশু উপাদানগুলির মান অভিভাবকের বাইরে কিছু বোঝায় না, কারণ অভিভাবক সামগ্রী উপাদানটির z-index আছে 1 এ সেট করুন।

তাই এর বাচ্চারা, মডেল সহ, সেই z-index থেকে বেরিয়ে আসতে পারে না স্তর।

(আপনি এই সামান্য হতাশাজনক রূপকের সাথে এটি মনে রাখতে পারেন:একটি শিশু তার পিতামাতার দ্বারা সীমাবদ্ধ হতে পারে এবং তাদের থেকে মুক্ত হতে পারে না।)

এই সমস্যার কয়েকটি সমাধান আছে:

সমাধান:মডেলটিকে এর বাইরে সরান কন্টেন্ট প্যারেন্ট, এবং পৃষ্ঠার প্রধান স্ট্যাকিং প্রসঙ্গে।

সংশোধন করা মার্কআপটি তখন এইরকম দেখাবে:

<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>

এখন, মডেল উপাদানটি অন্য দুজনের কাছে একটি ভাইবোন উপাদান। এটি তিনটি উপাদানকে তাদের মতো একই স্ট্যাকিং প্রসঙ্গে রাখে, তাই তাদের প্রতিটি z-সূচক স্তর এখন একে অপরকে প্রভাবিত করবে।

এই নতুন স্ট্যাকিং প্রেক্ষাপটে, উপাদানগুলি নীচের ক্রম অনুসারে, উপরে থেকে নীচে প্রদর্শিত হবে:

• মডাল (z-index: 100 )
• সাইড ট্যাব (z-index: 5 )
• সামগ্রী (z-index: 1 )

বিকল্প সমাধান:বিষয়বস্তু থেকে অবস্থান সরান, তাই এটি হবে না মডেলের z-সূচক সীমিত করুন।

আপনি যদি মার্কআপ পরিবর্তন করতে না চান বা না চান, তাহলে আপনি position সরিয়ে এই সমস্যাটি সমাধান করতে পারেন বিষয়বস্তু উপাদান থেকে সেটিং:

.content {
    // No position set    
}

.modal {
    position: absolute;
    z-index: 100;
}

.side-tab {
    position: absolute;
    z-index: 5;
}

যেহেতু বিষয়বস্তু উপাদানটি এখন অবস্থানহীন, এটি আর মোডালের z-index সীমাবদ্ধ করবে না মান তাই ওপেন মডেলটি সাইড ট্যাব এলিমেন্টের উপরে অবস্থান করা হবে, কারণ এটির উচ্চতর z-index 100 এর মধ্যে।

যদিও এটি কাজ করে, আমি ব্যক্তিগতভাবে প্রথম সমাধানের জন্য যাব।

কারণ ভবিষ্যতে যদি কোনো কারণে আপনাকে বিষয়বস্তু উপাদানের অবস্থান করতে হয়, তাহলে এটি আবার স্ট্যাকিং প্রসঙ্গে মডেলের ক্রমকে সীমিত করবে।

সারাংশে

আমি আশা করি আপনি এই টিউটোরিয়ালটি সহায়ক খুঁজে পেয়েছেন! সংক্ষেপে, এই দুটি নির্দেশিকা অনুসরণ করে z-সূচকের বেশিরভাগ সমস্যা সমাধান করা যেতে পারে:

1. উপাদানগুলির অবস্থান সেট এবং z-সূচক নম্বর সঠিক ক্রমে আছে কিনা তা পরীক্ষা করুন৷
2. নিশ্চিত করুন যে আপনার কাছে z-index সীমিত অভিভাবক উপাদানগুলি নেই তাদের সন্তানদের স্তর।

সম্পদ:

• W3.org:স্বচ্ছতা:'অস্বচ্ছতা' বৈশিষ্ট্য
• W3.org:স্ট্যাক স্তর নির্দিষ্ট করা
• মোজিলা ডেভেলপার নেটওয়ার্ক:স্ট্যাকিং প্রসঙ্গ
• PhilipWalton.com:Z-index সম্পর্কে আপনাকে যা কেউ বলেনি
• Smashing Magazine:Z-index CSS প্রপার্টি