Position খুবি গুরুত্ত পূর্ণ প্রপার্টি। এ প্রপার্টি ব্যবহার করে একটি ইলিম্যান্ট কোথায় বসবে, তা ঠিক করে দেওয়া যায়। একটি ইলিম্যান্ট আরেকটি ইলিম্যান্ট এর উপর ওভারল্যাপিং করানো যায়। এবং কোনটা কোন ইলিম্যান্ট এর উপর হবে, তাও ঠিক করে দেওয়া যায়।
একটি ইলিম্যান্ট top, bottom, left, and right ইত্যাদি কোথায় সেট করা হবে, তাই ঠিক করা হয় Position দিয়ে। চার রকমের পজিশন রয়েছেঃ
- Static Positioning
- Fixed Positioning
- Relative Positioning
- Absolute Positioning
Static Positioning
এটা ডিফল্ট পজিশন। যদি কোন ইলিম্যান্ট এর position সেট না করা হয়, তাহলে তা অটোমেটিকেলি Static positon এ দেখায়। Static Position এ যে ইলিম্যাটটি আগে লেখা হবে, তা আগে দেখাবে। যে ইলিম্যান্ট পরে বসাবে, তা পরে। top, bottom, left, এবং right প্রপার্টি গুলো Static Position এ সেট করা যায় না।
Fixed Positioning
Fixed Position দিয়ে একটি ইলিম্যান্ট কোথায় বসবে তা সেট করে দেওয়া যায়। সেট করার পর ইলিম্যান্টটি ব্রাউজারের এক জাগাতেই দেখাবে। উপর নিচ করানো যাবে না। Static Postion এ top, bottom, left, এবং right প্রপার্টি গুলো Static Position এ সেট করা যায়। সাধারনত Pixel অথবা Persentage দিয়ে এসব প্রপার্টি গুলো সেট করা যায়।
Relative Positioning
Relative Position এর প্যারেন্ট ইলিম্যান্ট এর উপর নির্বর করে। প্যারেন্ট ইলিম্যান্ট এর ভেতর কিভাবে বসবে, তাই সেট করা যায়। Relative Position ব্যবহার করলে z-index নামক আরেকটি প্রপার্টি ব্যবহার করা যায়। z-index দিয়ে একটা ইলিম্যান্ট এর উপর আরেকটি ইলিম্যান্ট এর ওভারল্যাপিং করানো যায়।
Absolute Positioning
Absolute Positioning
Absolute Position সবচেয়ে পাওয়ারফুল পজিশন প্রোপার্টি। এটা দিয়ে আমরা একটি ইলিম্যান্ট আমাদের ইচ্ছে মত যেকোন জাগায় বসাতে পারি। তবে এটা পজিশন প্যারেন্ট ইলিম্যান্ট এর relative হবে। মানে একটি ইলিম্যান্ট এর ভেতরে আরেকটি ইলিম্যান্ট লিখতে ঐটার relative হবে।
Absolute Position এ top, bottom, left, এবং right প্রপার্টি গুলো Static Position এ সেট করা যায়।