সিএসএস পজিশন টিউটোরিয়াল (CSS Position Tutorial in Bangla)
সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। পরিষ্কার ধারনা না থাকলে অনেক কাজে গিয়ে আটকা পরে যাবে। বিশেষ করে পেজের অপ্রত্যাশিত কোন জায়গায় কোন ছবি ইত্যাদি বসাতে হলে, একটা div বা এলিমেন্টের উপর আরেকটা div বা এলিমেন্ট নিতে হলে ইত্যাদি।
৪ ধরনের পজিশন আছে
static
বাই ডিফল্ট position:static; থাকে, এটার অর্থ হচ্ছে কোন পজিশনিং করা নেই। ডকুমেন্টের কোডের কারনে এলিমেন্টটি যেখানে আঝে পেজেও সেখানে দেখাবে।
relative
এটাও static এর মতই কিন্তু এখানে top, left, bottom, right এবং z-index ব্যবহার করে এলিমেন্ট কে তার অবস্থান থেকে সরানো যাবে। relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে। যেমন
01.div.one{02.position:relative;03.top:50px;04.left:30px;05.width:200px;06.height:200px;07.background: red;08.}09. 10.div.two{11.width:200px;12.height:200px;13.background: maroon;14.}15. 16.div.three{17.width:200px;18.height:200px;19.background: black;20.}দেখুন ১ নম্বর ডিভটি তার অবস্থান থেকে ৫০ পিক্সেল নিচে এবং ৩০ পিক্সেল বামে সরে এসেছে। এমনকি ২ নম্বর ডিভের উপরে চলে এসেছে। যদি চান ১ নম্বর ডিভটি নিচে দেখাক তাহলে z-index : -1; বা যেকোন মাইনাস মান দিয়ে দিন নিচে চলে যাবে।
** লক্ষনীয় বিষয় হচ্ছে বামে নিচে যাবার কারনে যে ফাকাটুকু সৃষ্টি হল সেখানে আর কাউকে ঢুকতে দেয়নি। মানে ডিভটি তার আসল স্পেসটুকু হারাবেনা বরং ধরে রাখবে।
** z-index কাজ করে তখনই যখন কোন এলিমেন্টের সিএসএস এ position করা থাকে।
absolute
position:absolute; দিলে এলিমেন্টটি তার immediate আগের প্যারেন্ট ডিভের সাপেক্ষে সরবে (top, left ইত্যাদি দিয়ে)। যদি কোন প্যারেন্ট ডিভ না থাকে তাহলে <html> তথা ব্রাউজারের সর্ববাম এবং উপর থেকে হিসেব করে সরবে। যেমন আগের উদাহরনেই position:absolute করে দেন আর প্রয়োগ দেখুন।
** এখানে এলিমেন্ট তার নিজের জন্য আর স্পেস ধরে রাখেনা
** absolute পজিশন করলে এলিমেন্ট ডকুমেন্টে স্বাভাবিক অবস্থান হারিয়ে ফেলে মানে absolute উঠিয়ে দিলে এলিমেন্ট টি যেখানে দেখাবে, absolute দিলে সেখানে আর দেখাবেনা।
fixed
কোন এলিমেন্টের পজিশন fixed দিলে সেটা ব্রাউজারের সাপেক্ষে স্থির হয়ে থাকবে এমনকি স্ক্রল করলেও ঐ এলিমেন্ট তার অবস্থান পরিবর্তন করবেনা। এটার কাজ হুবহু absolute এর মতই শুধু পার্থক্য হচ্ছে এটা সবসময় ব্রাউজারের সাপেক্ষে তার অবস্থান নেবে (top, left ইত্যাদি দিলে), absolute এর মত প্যারেন্ট এলিমেন্ট এর সাপেক্ষে সরবেনা।
1.p.f_text {2.position: fixed;3.top: 20px;4.right: 15px;5.color: maroon;6.}** IE7, IE8 এ DOCTYPE না দিলে fixed পজিশনিং কাজ করবেনা।
0 মন্তব্য(গুলি):
Post a Comment