পজিশনিং
সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। সিএসএস পজিশনিং বৈশিষ্ট্য আপনাকে একটি উপাদান (element) উপস্থাপন করার অনুমতি দেয়। এর মাধ্যমে উপাদান গুলো একটির পিছনে আরেকটি উপাদান রাখা যায়। এমন কি উপাদান এর কন্টেন্ট খুব বড় হলে কি হবে তা উল্লেখ করতে পারে।
উপাদানসমূহ উপরে, নীচে, বাম, ডান এবং বৈশিষ্ট্যাবলী ব্যবহার করে স্থান দিতে পারে। আগে অবস্থান যথাযত সেট না করা হলে, তবে এই বৈশিষ্ট্য কাজ করবে না। এরা পজিশনিং পদ্ধতির উপর নির্ভর করে ভিন্নভাবে কাজ করে। পরিষ্কার ধারনা না থাকলে অনেক কাজে গিয়ে আটকা পরে যাবে।
৪ ধরনের পজিশন পদ্ধতি আছে। নিচে সেগুলা নিয়ে আলোচনা করবো।
১. স্ট্যাটিক (static) পজিশনিং
এতে HTML উপাদান (element) ডিফল্ট স্ট্যাটিক স্থান হয়। এর স্ট্যাটিক স্থান, উপাদান সবসময় পৃষ্ঠার স্বাভাবিক প্রবাহ অনুযায়ী হয়। স্ট্যাটিক স্থান উপাদানগুলো উপরে, নীচে, বাম এবং ডান বৈশিষ্ট্য দ্বারা প্রভাবিত হয় না। এতে বাই ডিফল্ট position: static থাকে, এটার অর্থ হচ্ছে কোন পজিশনিং করা নেই। ডকুমেন্টের কোডের কারনে এলিমেন্টটি যেখানে আসে পেজেও সেখানে দেখাবে।
div.static {
position: static;
border: 3px solid #8AC007;
}
২. স্থায়ী (Fixed) পজিশনিং
কোন এলিমেন্টের পজিশন ফিক্সড করে দিলে সেটা ব্রাউজারের সাপেক্ষে স্থির হয়ে থাকবে এমনকি স্ক্রল করলেও ঐ এলিমেন্ট তার অবস্থান পরিবর্তন করবেনা।
উদাহরণঃ
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}
ফিক্সড পজিশনিং উপাদানগুলি স্বাভাবিক প্রবাহ থেকে সরিয়ে ফেলা হয়। সাধারনত সেগুলি খুঁজে পায়ও যাই না। এটার কাজ হুবহু absolute এর মতই শুধু পার্থক্য হচ্ছে এটা সবসময় ব্রাউজারের সাপেক্ষে তার অবস্থান নেবে, absolute এর মত প্যারেন্ট এলিমেন্ট এর সাপেক্ষে সরবেনা।
IE7, IE78 এ DOCTYPE না দিলে fixed পজিশনিং কাজ করবেনা।
৩. Relative পজিশনিং
Relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে।
উদাহরণঃ
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
এটাও static এর মতই কিন্তু এখানে top, left, bottom, right এবং z-index ব্যবহার করে এলিমেন্ট কে তার অবস্থান থেকে সরানো যাবে।
উদাহরণঃ
h2.pos_top {
position: relative;
top: -50px;
}
Relative পজিশনিং এর উপাদান প্রায়ই একেবারে স্থান উপাদানের জন্য ধারক ব্লক হিসাবে ব্যবহার করা হয়।
৪. Absolute পজিশনিং
position: absolute দিলে এলিমেন্টটি তার immediate আগের প্যারেন্ট ডিভের সাপেক্ষে সরবে (top, left ইত্যাদি দিয়ে)। যদি কোন প্যারেন্ট ডিভ না থাকে তাহলেতথা ব্রাউজারের সর্ববাম এবং উপর থেকে হিসেব করে সরবে। উদাহরণঃ h2 { position: absolute; left: 100px; top: 150px; } Absolute পজিশন করলে এলিমেন্ট ডকুমেন্টে স্বাভাবিক অবস্থান হারিয়ে ফেলে মানে absolute উঠিয়ে দিলে এলিমেন্ট টি যেখানে দেখাবে, absolute দিলে সেখানে আর দেখাবেনা। এখানে এলিমেন্ট তার নিজের জন্য আর স্পেস ধরে রাখেনা।
ওভারল্যাপিং উপাদানসমূহ
যখন উপাদানগুলো স্বাভাবিক প্রবাহ বাইরে স্থান হয়, তখন তারা অন্যান্য উপাদানগুলো কে ওভারল্যাপ করে। z-index একটি উপাদান যা স্ট্যাক এ নির্দিষ্ট করে। একটি উপাদান এর ইতিবাচক বা নেতিবাচক স্ট্যাক অর্ডার আছে। উদাহরণঃ img { position: absolute; left: 0px; top: 0px; z-index: -1; } বৃহত্তর স্ট্যাক অর্ডার এর একটি উপাদান একটি নিম্ন স্ট্যাক অর্ডার এর একটি উপাদানের সামনে সবসময় হবে। যদি দুইটি স্থান উপাদান নির্দিষ্ট একটি z-index ছাড়া আবৃত তাহলে HTML কোড শেষ অবস্থান উপাদান এর উপরে দেখানো হবে।