z-index কী? z-index একটি CSS প্রপার্টি যা আপনাকে HTML এলিমেন্টগুলাকে একে অপরের উপরে লেয়ারে পজিশন করতে দেয়। প্রথমে এটি সহজ লাগে, কিন্তু এটি ধাঁধামূলকভাবে সহজ।
কিছু বিচিত্র, অন-ইনটুইটিভ নিয়ম আছে যা আপনার চাওয়া অনুযায়ী এটি behave না করাতে পারে— আপনি z-index 999999 সেট করলেও!
এই আর্টিকেলে, z-index আপনার জন্য কেন কাজ না করছে তার ৪টি সবচেয়ে সাধারণ কারণ বিস্তারিত ব্যাখ্যা করা হয়েছে। আপনি শিখবেন কীভাবে CSS ব্যবহার করে এলিমেন্টগুলাকে সামনে আনা যায়, বা অন্যান্য এলিমেন্টের পেছনে পাঠানো যায়।
১. একই স্ট্যাকিং কন্টেক্সটের এলিমেন্টগুলো অপিয়ারেন্সের ক্রমে দেখাবে, পরবর্তী এলিমেন্টগুলো পূর্বের এলিমেন্টগুলোর উপরে থাকবে।
আমাদের প্রথম উদাহরণে, একটি আপেক্ষিক সরল লে আউট আছে যাতে ৩টি প্রধান এলিমেন্ট রয়েছে:
- একটি বিডালের ছবি
- টেক্সট সহ একটি সাদা ব্লক
- উसी বিডালের আরেকটি ছবি
এটির 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; }তবে, এটি নিচের মতো দেখায়:
See the Pen Z-index: #1: set position, #2: natural stacking order, #3: CSS properties by Jessica (@thecodercoder) on CodePen.
প্রথম বিডাল সাদা কন্টেন্ট ব্লকের নিচে পজিশন করা আছে, ঠিক যেমন আমরা চেয়েছিলাম। কিন্তু দ্বিতীয় বিডালের ছবি ব্লকের উপরে পজিশন করা আছে!
এটি কেন হচ্ছে?
এই আচরণের কারণ হলো ওয়েবপেজ上的 ন্যাচারেল স্ট্যাকিং অর্ডার। এই গাইডলাইনগুলো মূলত নির্ধারণ করে যে কোন এলিমেন্টগুলো উপরে থাকবে এবং কোনগুলো নিচে।
যদি এলিমেন্টগুলোর z-index সেট না থাকে, তবে তাদের স্ট্যাকিং অর্ডার তাদের অপিয়ারেন্সের ক্রম দ্বারা নির্ধারিত হয়। এই নিয়ম অনুযায়ী, মার্কআপে পরে আসা এলিমেন্টগুলো আগে আসা এলিমেন্টগুলোর উপরে থাকবে।
(স্ট্যাকিং অর্ডার গাইডলাইন সম্পর্কে আরও পড়ুন Mozilla Developer Network-এ এখানে।)
বিডাল এবং সাদা ব্লক উদাহরণে, সেগুলো এই নিয়ম মেনে চলছে। তাই প্রথম বিডাল সাদা ব্লক এলিমেন্টের নিচে, এবং সাদা ব্লক দ্বিতীয় বিডালের নিচে।
ঠিক আছে, স্ট্যাকিং অর্ডার ঠিক আছে, কিন্তু CSS কীভাবে ফিক্স করবেন যাতে দ্বিতীয় বিডাল সাদা ব্লকের নিচে থাকে?
দ্বিতীয় কারণটি দেখি:
২. এলিমেন্টটির position সেট করা নেই
স্ট্যাকিং অর্ডার নির্ধারণ করার অন্য একটি গাইডলাইন হলো এলিমেন্টটির position সেট করা আছে কিনা।
এলিমেন্টের জন্য position সেট করতে, CSS position প্রপার্টি static ছাড়া যেকোনো কিছুতে সেট করুন, যেমন relative বা absolute। (এ সম্পর্কে আরও পড়ুন আমার এই আর্টিকেলে।)
এই নিয়ম অনুযায়ী, পজিশন্ড এলিমেন্টগুলো আনপজিশন্ড এলিমেন্টগুলোর উপরে দেখাবে।
তাই সাদা ব্লককে position: relative সেট করে, এবং দুটি বিডাল এলিমেন্টকে আনপজিশন্ড রেখে স্ট্যাকিং অর্ডারে সাদা ব্লককে বিডালদের উপরে আনা যায়।
এটি কেমন দেখাবে— আপনি উপরের Codepen-এও এক্সপেরিমেন্ট করতে পারেন।
বাহ!
এখন, আমরা নিচের বিডালকে আপসাইড ডাউন ঘুরিয়ে দিতে চাই, transform প্রপার্টি ব্যবহার করে। যাতে দুটি বিডালই সাদা ব্লকের নিচে থাকে, শুধু তাদের মাথা বের থাকে।
তবে এটি করলে আরও z-index-সম্পর্কিত বিভ্রান্তি তৈরি করতে পারে। পরবর্তী অংশে সমস্যা এবং সমাধান নিয়ে আলোচনা করব।
৩. opacity বা transform-এর মতো কিছু CSS প্রপার্টি সেট করলে এলিমেন্টটি একটি নতুন স্ট্যাকিং কন্টেক্সটে চলে যায়।
আমরা আগে বলেছিলাম, আমরা নিচের বিডালকে আপসাইড ডাউন ঘুরিয়ে দিতে চাই। এটি করতে, আমরা transform: rotate(180deg) যোগ করব।
.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }তবে এটি নিচের বিডালকে আবার সাদা ব্লকের উপরে দেখাতে শুরু করে!
এখানে কী হচ্ছে??
আপনি এই সমস্যাটি ঘন ঘন নাও মুখোমুখি হতে পারেন, কিন্তু স্ট্যাকিং অর্ডার আরেক দিক হলো কিছু CSS প্রপার্টি যেমন transform বা opacity এলিমেন্টকে তার নিজস্ব, নতুন স্ট্যাকিং কন্টেক্সট-এ রাখে।
এর মানে হলো .cat-bottom এলিমেন্টে transform যোগ করলে এটি মনে করে যেন এর z-index ০। যদিও এর 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-index সমস্যা সমাধান করবে।
এখন, আমাদের z-index কাজ না করার শেষ কারণ নিয়ে আলোচনা করি। এটি কিছুটা জটিল, কারণ এটি প্যারেন্ট এবং চাইল্ড এলিমেন্ট জড়িত।
৪. এলিমেন্টটি তার প্যারেন্টের z-index লেভেলের কারণে নিম্ন স্ট্যাকিং কন্টেক্সটে আছে
এই উদাহরণের কোড চেক করি:
See the Pen Z-index: #4 different stacking contexts by Jessica (@thecodercoder) on CodePen.
এখানে আমাদের কী আছে: একটি সাধারণ ওয়েবপেজ রেগুলার কন্টেন্টসহ, এবং একটি গোলাপি সাইড ট্যাব যাতে "Send Feedback" লেখা আছে যা কন্টেন্টের উপরে পজিশন করা আছে।
তারপর, যখন বিডালের ছবিতে ক্লিক করবেন, একটি মোডাল উইন্ডো একটি ট্রান্সপারেন্ট গ্রে ব্যাকগ্রাউন্ড ওভারলে সহ খুলবে।
তবে, মোডাল উইন্ডো খোলা সত্ত্বেও, সাইড ট্যাব এখনও গ্রে ওভারলের উপরে আছে। আমরা চাই ওভারলে সবকিছুর উপরে দেখাবে, সাইড ট্যাব সহ।
প্রশ্নক্রমে এলিমেন্টগুলোর CSS দেখি:
.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }সব এলিমেন্টের position সেট আছে, এবং সাইড ট্যাবের z-index ৫, যা এটিকে কন্টেন্ট এলিমেন্টের উপরে পজিশন করে, যেটার z-index: 1।
তারপর, মোডালের z-index: 100 আছে যা চाहিদা সাইড ট্যাবের z-index: 5 এর উপরে পজিশন করবে। কিন্তু বদলে, মোডাল ওভারলে সাইড ট্যাবের নিচে আছে।
এটি কেন হচ্ছে?
আমরা আগে স্ট্যাকিং কন্টেক্সটে যেগুলো যায় সেগুলো নিয়ে আলোচনা করেছি, যেমন এলিমেন্টের position সেট আছে কিনা, এবং মার্কআপে এর অর্ডার।
তবে স্ট্যাকিং কন্টেক্সটের আরেক দিক হলো: একটি চাইল্ড এলিমেন্ট তার প্যারেন্টের স্ট্যাকিং কন্টেক্সটের মধ্যে সীমাবদ্ধ।
প্রশ্নক্রমে তিনটি এলিমেন্টের निकট থেকে দেখি।
আমাদের মার্কআপ নিচের মতো:
<section class="content"> <div class="modal"></div> </section> <div class="side-tab"></div>মার্কআপ দেখে, আমরা দেখতে পাচ্ছি content এবং side-tab এলিমেন্টগুলো সিবলিং। অর্থাৎ, সেগুলো মার্কআপে একই লেভেলে আছে (এটি z-index লেভেল থেকে ভিন্ন)। এবং মোডাল content এলিমেন্টের একটি চাইল্ড এলিমেন্ট।
কারণ মোডাল content এলিমেন্টের ভিতরে আছে, এর z-index ১০০ শুধু তার প্যারেন্ট, content এলিমেন্টের ভিতরেই প্রভাব ফেলে। উদাহরণস্বরূপ, যদি অন্যান্য চাইল্ড এলিমেন্ট থাকে যারা মোডালের সিবলিং, তাদের z-index মান সেগুলোকে একে অপরের উপরে বা নিচে পজিশন করবে।
তবে সেই চাইল্ড এলিমেন্টগুলোর z-index মান প্যারেন্টের বাইরে কিছু মানে রাখে না, কারণ প্যারেন্ট content এলিমেন্টের z-index ১ সেট করা আছে।
তাই এর চাইল্ডরা, মোডাল সহ, সেই z-index লেভেল থেকে বের হতে পারে না।
(এটি এই কিছুটা বিষণ্ণ লুপ্তির সাথে মনে রাখতে পারেন: একটি চাইল্ড তার প্যারেন্ট দ্বারা সীমাবদ্ধ হতে পারে, এবং সেটি থেকে মুক্ত হতে পারে না।)
এই সমস্যার কয়েকটি সমাধান আছে:
সমাধান: মোডালকে content প্যারেন্টের বাইরে সরিয়ে, পেজের মেইন স্ট্যাকিং কন্টেক্সটে আনা।
সংশোধিত মার্কআপ তখন নিচের মতো হবে:
<section class="content"></section> <div class="modal"></div> <div class="side-tab"></div>এখন, মোডাল এলিমেন্ট অন্য দুটির সাথে সিবলিং এলিমেন্ট। এটি সব তিনটি এলিমেন্টকে একই স্ট্যাকিং কন্টেক্সটে রাখে, তাই তাদের z-index লেভেলগুলো এখন একে অপরের ऊपर প্রভাব ফেলবে।
এই নতুন স্ট্যাকিং কন্টেক্সটে, এলিমেন্টগুলো নিচের ক্রমে উপরে থেকে নিচে দেখাবে:
- modal (
z-index: 100) - side tab (
z-index: 5) - content (
z-index: 1)
বিকল্প সমাধান: content-এ থেকে পজিশনিং সরিয়ে দিন, যাতে এটি মোডালের z-index লিমিট না করে।
আপনি যদি মার্কআপ পরিবর্তন করতে না চান বা না পারেন, তবে content এলিমেন্ট থেকে position সেটিং সরিয়ে এই সমস্যাটি সমাধান করতে পারেন:
.content { // No position set } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }যেহেতু content এলিমেন্ট এখন আনপজিশন্ড, এটি আর মোডালের z-index মান লিমিট করবে না। তাই খোলা মোডাল তার উচ্চতর z-index ১০০-এর কারণে সাইড ট্যাব এলিমেন্টের উপরে পজিশন হবে।
যদিও এটি কাজ করে, আমি ব্যক্তিগতভাবে প্রথম সমাধানটিই পছন্দ করব।
কারণ ভবিষ্যতে কোনো কারণে content এলিমেন্টকে পজিশন করতে হলে, এটি আবার মোডালের অর্ডার স্ট্যাকিং কন্টেক্সটে লিমিট করবে।
সারসংক্ষেপ
আশা করি আপনি এই টিউটোরিয়ালটি উপকারী পেয়েছেন! সারসংক্ষেপে, z-index-এর অধিকাংশ সমস্যা এই দুটি গাইডলাইন মেনে চললে সমাধান করা যায়:
- চেক করুন যে এলিমেন্টগুলোর position সেট আছে এবং z-index নম্বরগুলো সঠিক ক্রমে।
- নিশ্চিত করুন যে আপনার কাছে প্যারেন্ট এলিমেন্ট নেই যারা তাদের চাইল্ডদের
z-indexলেভেল লিমিট করছে।
রিসোর্স:
- W3.org: Transparency: the ‘opacity’ property
- W3.org: Specifying the stack level
- Mozilla Developer Network: The Stacking Context
- PhilipWalton.com: What No One Told You About Z-index
- Smashing Magazine: The Z-index CSS Property
