অধ্যায় ৯: CSS Display, Position, Z-index, Overflow (বাংলায়)
এই অধ্যায়ে শিখবো কীভাবে HTML এলিমেন্টের দেখানোর ধরন (display), অবস্থান (position), স্তর (z-index) এবং অতিরিক্ত অংশ (overflow) নিয়ন্ত্রণ করতে হয়।
১. CSS Display Property
display দিয়ে নির্ধারণ করা হয় এলিমেন্ট কিভাবে প্রদর্শিত হবে।
প্রধান ধরণ:
| মান (value) | কাজ |
|---|---|
block |
সম্পূর্ণ লাইন নিয়ে যায় (div, p) |
inline |
শুধু প্রয়োজনীয় জায়গা নেয় (span) |
inline-block |
inline এর মতো, কিন্তু block বৈশিষ্ট্যও থাকে |
none |
এলিমেন্ট হাইড করে (দেখায় না) |
উদাহরণ:
span {
display: block;
}
২. CSS Position Property
position দিয়ে এলিমেন্টের অবস্থান নির্ধারণ করা হয়।
| মান (value) | কাজ |
|---|---|
static |
ডিফল্ট, নরমালি ফ্লো অনুযায়ী থাকে |
relative |
নিজের স্বাভাবিক অবস্থান থেকে স্থানান্তর করতে পারে |
absolute |
সবচেয়ে কাছের position সহ প্যারেন্টের সম্পর্কিত অবস্থান |
fixed |
স্ক্রিনে ফিক্সড থাকে, স্ক্রল করলে সরবে না |
sticky |
স্ক্রল করলে নির্দিষ্ট অবস্থানে আটকে থাকে |
উদাহরণ:
div {
position: relative;
top: 20px;
left: 10px;
}
৩. Z-index
z-index দিয়ে নির্ধারণ করা হয় এলিমেন্টের স্তর বা কোন এলিমেন্ট উপরে থাকবে।
-
শুধুমাত্র তখন কাজ করে যখন
positionথাকেrelative,absoluteবাfixed -
বেশি
z-indexমান যার, সে উপরে থাকবে।
.box1 {
position: absolute;
z-index: 2;
}
.box2 {
position: absolute;
z-index: 1;
}
৪. Overflow
overflow দিয়ে নির্ধারণ করা হয় যদি কন্টেন্ট তার কনটেইনার থেকে বড় হয় তাহলে কী হবে।
| মান (value) | কাজ |
|---|---|
visible |
কনটেন্ট কনটেইনারের বাইরে দেখাবে (default) |
hidden |
কনটেন্ট কাটবে, বাইরে কিছু দেখাবে না |
scroll |
কনটেইনারে স্ক্রলবার আসবে |
auto |
প্রয়োজন হলে স্ক্রলবার দেখাবে |
উদাহরণ:
div {
width: 200px;
height: 100px;
overflow: scroll;
}
৫. উদাহরণসহ কোড:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.box1 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: red;
z-index: 2;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
displayদিয়ে এলিমেন্টের ধরন নিয়ন্ত্রণ করা -
positionদিয়ে এলিমেন্ট কোথায় থাকবে ঠিক করা -
z-indexদিয়ে এলিমেন্টের স্তর নির্ধারণ -
overflowদিয়ে অতিরিক্ত কন্টেন্ট কিভাবে হ্যান্ডেল করা হয়
পরবর্তী অধ্যায়:
অধ্যায় ১০: CSS Flexbox পরিচিতি
লিখুন: “অধ্যায় ১০ শুরু করো” — তাহলে আমরা আধুনিক লেআউট সিস্টেম Flexbox শিখবো।