css-এ যত কনফিউজিং টপিক আছে তার মধ্যে অন্যতম হলো positioning. কয়েকদিন পজিশনিং নিয়ে পড়ালেখা করে যা বুঝলাম তাই আজ শেয়ার করবো।
position : static
কোন html এলিমেন্টকে মার্কাপ এর সময় যেখানে যেমনে রাখা হয়েছে, এলিমেন্টটি ঐ খানেই পড়ে থাকবে। এলিমেন্টের এই বিহেভিয়ারটাই হচ্ছে static. যেহেতু এলিমেন্টটি এক জায়গাতেই পড়ে থাকবে সেহেতু কোন position: static ওয়ালা কোন এলিমেন্টে left, right, top, bottom প্রোপার্টিগুলো কোন কাজে আসবে না। প্রাথমিক ভাবে সব এলিমেন্টেরই পজিশন স্ট্যাটিক থাকে।
position: relative
কোন এলিমেন্ট এর position: relative মানে হচ্ছে এলিমেন্টটিকে এর নরমাল পজিশন থেকে কোন পজিশনে রাখতে হবে তার মাঝে একটা রিলেশন করা। (relation থেকে relative; এইভাবে মনে রাখা যেতে পারে)। আর এই রিলেশন করা হয় left, right, top, bottom প্রোপার্টিগুলো দিয়ে।position: relative এর সাথে যদি top: 50px দেয়া হয় তাহলে এলিমেন্টটি top থেকে 50px নিচে নেমে আসবে। কিন্তু যদি এই এলিমেন্ট এর উপরে আরেকটি এলিমেন্ট থাকে যার কোন পজিশনিং করা হয়নি বা হয়েছে সেক্ষেত্রে কি হবে?
সেক্ষেত্রে এলিমেন্টটি তার শিবলিংস থেকে 50px নেমে আসবে।
position: absolute
কোন এলিমেন্ট এর position: absolute মানে হচ্ছে এলিমেন্টটি এর পেরেন্ট এর পজিশন এর সাথে নড়চড় করবে। অর্থাৎ, পেরেন্ট যেখানেই থাকুক, চাইল্ড এর position: absolute এর সাথে যদি top: 50px দেয়া হয় তাহলে এলিমেন্টটি পেরেন্ট এর টপ বর্ডার থেকে 50px নেমে আসবে।এক্ষেত্রে একটা প্রশ্ন থাকে যে, এলিমেন্ট যদি কোন পেরেন্ট এর আন্ডারে না থাকে সেক্ষেত্রে কি হবে?সেক্ষেত্রে এলিমেন্টটি body কে relative ধরে নড়চড় করবে।
position: fixed
কোন এলিমেন্ট এর position: fixed মানে হচ্ছে এলিমেন্টটিকে যেখানে রেখেছেন অথবা left, right, top, bottom প্রোপার্টিগুলো দিয়ে যেখানে নিয়ে রেখেছেন, সেখানেই সে ফিক্সড হয়ে থাকবে।
position: sticky
position: sticky ওয়ালা এলিমেন্ট relative এবং fixed এই দুইটার মাঝে নড়চড় করে। কোন sticky এলিমেন্ট ততক্ষন relative অবস্থায় থাকে যতক্ষন scroll আসার মত অবস্থা না হয়। যখনই সে scroll এর অবস্থায় আসবে তখনই সে এক খানে ফিক্সড হয়ে যাবে। কোথায় ফিক্সড রাখবো সেটা আমরা left, right, top, bottom প্রোপার্টিগুলো দিয়ে বলে দিতে পারি।
এই হলো পজিশনিং নিয়ে আমার পড়ালেখা। যদি কোন ভুল বলে থাকি ক্ষমাসুন্দর দৃষ্টিতে দেখে ভুল শুধরিয়ে দেয়ার অনুরোধ রইলো।
উদাহরণ গুলো এই লিংকে দেখা যাবেঃ https://codesandbox.io/s/css-positioning-r39uz