CSS পজিশনিং মেথডসমূহ বোঝা

এলিমেন্ট পজিশন করার জন্য CSS-এ নিম্নলিখিত পজিশনিং মেথডগুলো রয়েছে:

রিলেটিভ পজিশনিং (Relative Positioning)

রিলেটিভ পজিশনিং-এ এলিমেন্টটি তার স্বাভাবিক অবস্থানের সাপেক্ষে পজিশন করা হয়। এর জন্য position: relative ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> div.demo {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    left: 50px; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <div class="demo"> position: relative; </div> <p>This is another demo text.</p> </body> </html>

আউটপুট

এবসোলিউট পজিশনিং (Absolute Positioning)

এবসোলিউট পজিশনিং-এ একটি এলিমেন্ট তার নিকটতম পজিশन्ड পূর্বপুরুষ (positioned ancestor) এর সাপেক্ষে পজিশন করা হয়।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> div.demo1 {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    width: 600px;    height: 200px; } div.demo2 {    position: absolute;    color: white;    background-color: orange;    border: 2px dashed blue;    top: 50px;    right: 0;    width: 300px;    height: 100px; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <div class="demo1">position: relative; <div class="demo2"> position: absolute; </div> </div> <p>This is another demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> </body> </html>

আউটপুট

ফিক্সড পজিশনিং (Fixed Positioning)

position: fixed সেট করা এলিমেন্ট পৃষ্ঠা স্ক্রল করলেও একই জায়গায় থাকে।

উদাহরণ

<!DOCTYPE html> <html> <head> <style> div.demo1 {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    width: 600px;    height: 200px; } div.demo2 {    position: absolute;    color: white;    background-color: orange;    border: 2px dashed blue;    top: 50px;    right: 0;    width: 300px;    height: 100px; } div.demo3 {    position: fixed;    bottom: 0;    right: 20px;    width: 500px;    border: 3px solid orange;    color: blue; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <div class="demo1">position: relative; <div class="demo2"> position: absolute; </div> <div class="demo3"> position: fixed; </div> </div> <p>This is another demo text.</p> </body> </html>

আউটপুট

সারসংক্ষেপ