z-index stacking order এবং overflow content clipping/scroll behavior নিয়ন্ত্রণ করে।
Learning Objectives
Z-index & Overflow-এর মূল ধারণা বোঝা
প্রয়োজনীয় terminology চিনতে পারা
একটি practical example ব্যাখ্যা করতে পারা
নিজে practice/assignment সম্পন্ন করা
basic interview question-এর উত্তর দিতে পারা
Main Lesson
z-index stacking order এবং overflow content clipping/scroll behavior নিয়ন্ত্রণ করে।
এই topicটি CSS track-এর অংশ। শুধু definition মুখস্থ না করে কোথায়, কেন এবং কীভাবে ব্যবহার হয় সেটি বোঝাই লক্ষ্য। Production project-এ requirement, correctness, maintainability, accessibility, performance এবং security—প্রাসঙ্গিক হলে সবগুলো বিবেচনা করতে হবে।
Syntax / Code / Flow Example
.panel { overflow: auto; z-index: 2; }
Code/Flow Output বা অর্থ
উপরের exampleটি topic-এর core behavior দেখায়। Code হলে নিজে editor-এ লিখে run করবে; flow হলে প্রতিটি arrow-এর অর্থ নিজের ভাষায় ব্যাখ্যা করবে। শুধু copy-paste না করে ছোট পরিবর্তন করে result পর্যবেক্ষণ করবে।
Code/Concept Explanation
Z-index & Overflow-এ সবচেয়ে গুরুত্বপূর্ণ হলো input/structure, processing/behavior এবং expected result আলাদা করে বোঝা। Example-এর প্রতিটি keyword, tag, property, function, command বা architectural component কী দায়িত্ব পালন করছে তা শনাক্ত করো।
CSS rule-এ selector target নির্বাচন করে; property কী পরিবর্তন হবে এবং value কীভাবে পরিবর্তন হবে তা নির্ধারণ করে।
Practical Example
একটি business website বা web application-এ Z-index & Overflow কোথায় ব্যবহার হবে তা খুঁজে বের করো। উদাহরণস্বরূপ product catalog, contact form, admin dashboard, login, blog বা deployment workflow-এর সঙ্গে topicটি যুক্ত করে একটি ছোট scenario লিখো।
Common Mistakes
Definition মুখস্থ করে practice না করা।
Example code না বুঝে copy-paste করা।
Error message না পড়ে random পরিবর্তন করা।
Naming, formatting ও project structure অবহেলা করা।
Security/accessibility/performance প্রাসঙ্গিক হলেও একেবারে উপেক্ষা করা।
New & Difficult Words
| Word | Meaning / বাংলা ব্যাখ্যা |
| CSS | Cascading Style Sheets |
| Selector | Target element বাছাইয়ের pattern |
| Property | যে style বৈশিষ্ট্য পরিবর্তন করা হয় |
| Value | Property-এর নির্ধারিত মান |
Important Notes
নিজে লিখে/চালিয়ে দেখা ছাড়া class complete ধরা হবে না।
যে term বুঝবে না, difficult-word list-এ নিজের ভাষায় meaning যোগ করবে।
Production code-এ official documentation ও current version behavior যাচাই করবে।
Practice
Z-index & Overflow নিজের ভাষায় 3-5 লাইনে ব্যাখ্যা করো।
উপরের example নিজে লিখে/run বা diagram হিসেবে reproduce করো।
Example-এ অন্তত 2টি পরিবর্তন করে কী result হয় লিখো।
বাস্তব website-এ এই concept-এর একটি ব্যবহার খুঁজে লিখো।
Assignment
Class 30 assignment: Z-index & Overflow ব্যবহার করে একটি ছোট practical demo/note তৈরি করো। Screenshot বা output সংরক্ষণ করো এবং 5-10 লাইনে কী করেছ, কী সমস্যা হয়েছে, কীভাবে সমাধান করেছ লিখো।
Quiz
1. Z-index & Overflow কী?
Answer guide: নিজের ভাষায় core definition লিখবে।
2. এই concept কেন ব্যবহার করা হয়?
Answer guide: Problem/benefit ভিত্তিক উত্তর দেবে।
3. একটি practical example কী?
Answer guide: বাস্তব website/app-এর relevant example দেবে।
4. একটি common mistake কী?
Answer guide: Class-এর mistake section থেকে ব্যাখ্যাসহ লিখবে।
5. আজকের সবচেয়ে গুরুত্বপূর্ণ নতুন term কোনটি?
Answer guide: Term-এর full form/meaning লিখবে।
Interview Questions
Q: What is Z-index & Overflow?
A: Definition + purpose + one practical example—এই তিন অংশে সংক্ষিপ্ত উত্তর প্রস্তুত করবে।
Q: Why is Z-index & Overflow important in web development?
A: Definition + purpose + one practical example—এই তিন অংশে সংক্ষিপ্ত উত্তর প্রস্তুত করবে।
Q: Give a practical example related to Z-index & Overflow.
A: Definition + purpose + one practical example—এই তিন অংশে সংক্ষিপ্ত উত্তর প্রস্তুত করবে।
Class Summary
আজকের class-এ Z-index & Overflow-এর definition, purpose, basic syntax/flow, practical use, common mistakes এবং গুরুত্বপূর্ণ terminology শিখলাম। Assignment শেষ করার পরই পরবর্তী class-এ যাবে।
Next Class
Class 031 — Flexbox Basics