CSSBeginner
CSS Position
static, relative, absolute, fixed, sticky — CSS position property-এর পুরো বাংলা বুঝুন উদাহরণসহ।
10টি অংশবাংলা ভাষায়
position property নির্ধারণ করে element-টি পেজের কোথায় বসবে এবং কীভাবে অন্য element-এর সাথে সম্পর্কিত হবে।
position-এর মানগুলো
| মান | ব্যবহার |
|---|---|
| static | ডিফল্ট — স্বাভাবিক প্রবাহ |
| relative | স্বাভাবিক জায়গায় থাকে, top/left-এ সরানো যায় |
| absolute | প্যারেন্টের তুলনায় স্থির (anchoring) |
| fixed | স্ক্রল করলেও ভিউপোর্টে স্থির থাকে |
| sticky | স্ক্রল পর্যন্ত থাকবে, তারপর আটকে যায় |
relative + absolute
.card {
position: relative; /* নোঙ্গর */
}
.badge {
position: absolute;
top: 8px;
right: 8px;
}anchoring
absolute element তার nearest positioned ancestor (যার position static নয়) এর তুলনায় বসে। তাই প্যারেন্টে position: relative দেওয়া প্রয়োজন।
z-index
.modal {
position: fixed;
z-index: 50;
}একাধিক element একই জায়গায় পড়লে z-index ঠিক করে কোনটি উপরে থাকবে।
fixed-এর ব্যতিক্রম
position: fixed সাধারণত ভিউপোর্টের তুলনায় স্টিকি হয়, তবে কোনো ancestor-এ transform বা filter থাকলে তা সেই element-এর সাপেক্ষে হয়ে যায়।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।