11. CSS Positioning
📘 কনসেপ্ট (থিওরি)
position প্রপার্টি নিয়ন্ত্রণ করে পেজে এলিমেন্ট কীভাবে স্থাপিত হবে।
- **static** (ডিফল্ট) — স্বাভাবিক ডকুমেন্ট ফ্লো
- **relative** — স্বাভাবিক অবস্থানের সাপেক্ষে
- **absolute** — নিকটতম পজিশনড পূর্বসূরির সাপেক্ষে
- **fixed** — ভিউপোর্টের সাপেক্ষে (স্ক্রল করলেও থাকে)
- **sticky** — স্ক্রলের উপর ভিত্তি করে relative ও fixed এর মধ্যে পরিবর্তন হয়
position সেট করার পর (static ছাড়া), top, right, bottom, left দিয়ে এলিমেন্ট সরানো যায়।
**z-index** স্ট্যাকিং অর্ডার নিয়ন্ত্রণ করে (কোন এলিমেন্ট উপরে):
.popup { position: fixed; z-index: 999; }
💡 উদাহরণ
পজিশনিং উদাহরণ:
নতুন
ব্যাজসহ কার্ড
🎯 আপনার কাজ (প্র্যাকটিস)
absolute positioning ব্যবহার করে উপরে-ডানে "NEW" ব্যাজসহ একটি কার্ড তৈরি করুন।
main.css
Loading...
OUTPUT
Run your code to see the output here...