A Post Mortem Report of CSS Position !
Web এ একটি HTML Element এর Position কোথায় হবে তা নির্ধারণের জন্যে CSS Position Property ব্যবহৃত হয়। আরো সহজ ভাবে বলা যায় একটি HTML Element এরPosition সেট করার জন্য CSS Position Property ব্যবহার করা হয়।
CSS এ Position Property এর ভ্যালুসমূহঃ
- static
- relative
- fixed
- absolute
- sticky
CSS এ Position Property এর গ্লোবাল(global) ভ্যালুসমূহঃ
- inherit
- initial
- unset
উপরের Position Property ব্যবহারের পর HTML Element গুলোর পজিশন ঠিক করে দেওয়ার জন্য আপনাকে top, bottom, left এবং right প্রোপার্টি গুলোর যেটা দরকার সেটি ব্যবহার করতে হবে।
আর আপনি যদি প্রথমেই position প্রোপার্টি না সেট করে দেন তাহলে এই প্রোপার্টিসমূহ ঠিকমত কাজ করবে না। কারণ, এই প্রোপার্টিগুলো position প্রোপার্টির ভ্যালুর উপরে নির্ভরশীল।
এখন চলুন প্রথমে CSS এ Position Property সমূহের এর ভ্যালুসমূহ নিয়ে আলোচনা করা যাক:
position: static;
ডিফল্টভাবে HTML Element সমূহের পজিশন static থাকে। আর তখন top, right, bottom এবং left প্রোপার্টির ভ্যালু সমূহ কাজ করেনা। অর্থাৎ position: static; প্রোপার্টি সংশ্লিষ্ট HTML Element তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে।
ব্যাখ্যা: উপরের উদাহরণে সিলেক্টর .static-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে।
position: relative;
position:relative; ওstatic এর মতই পার্থক্য হচ্ছে এখানে আপনি চাইলে top, left, bottom, right এবং z-index ব্যবহার করে HTML Element কে তার অবস্থান থেকে সরাতে পারবেন। এমনকি অন্য একটা element এর উপর ও বসাতে পারবেন। relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে।
position: absolute;
position: absolute ও static এর মতই, পার্থক্য হচ্ছে এখানে HTML Element তার নিকটবর্তী পূর্বসুরী(ancestor) Element এর অবস্থানের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটে। এক্ষেত্রে , যদি Absolute পজিশনে থাকা এলিমেন্টের কোনো পূর্বসুরী না থকে তাহলে ইহা ডকুমেন্ট বডি(body) কে পূর্বসুরী ধরে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে এবং পেজ স্ক্রলিং এর সাথে সাথে নড়া চড়া করে। এবং সৃষ্ট ফাঁকা অংশ পার্শ্ববর্তী অন্য HTML Element এসে পূরণ করে।
position: fixed;
position: fixed; যুক্ত HTML Element গুলোviewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না।
position: sticky;
position: sticky; যুক্ত HTML Element ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন হয়। তা ছাড়া স্ক্রল পজিশনের উপর ভিত্তি করে position: sticky একইসাথেRelative এবং Fixed পজিশনের মধ্যে toggle করে।
এবার চলুন এক নজরে CSS Position Property এর সাথে কাজ করে এমন Property সমূহ সম্পর্কে জানা যাক:
- bottom
- clip
- left
- right
- top
- z-index
- CSS bottom Property
CSS এ position: absolute এ থাকা HTML Element এর জন্য bottom প্রোপার্টিটি একটি এলিমেন্টের bottom এর কিনারার একটি ইউনিটের উপরে/নিচে নিকটতম ancestor সেট করে।
পরামর্শঃ
যদি একটি absolute পজিশনে থাকা এলিমেন্টের কোনো positioned ancestors না থাকে তাহলে এটি ডকুমেন্টের পুরো বডি ব্যবহার করে এবং পেজে এটি স্ক্রলিং তৈরি করে।
শুধু স্ট্যাটিক ছাড়া একটি “positioned” এলিমেন্ট যেকোনো পজিশনে থাকতে পারে।
relative পজিশন এলিমেন্টের জন্য bottom প্রোপার্টিটি একটি এলিমেন্টের bottom এর কিনারার একটি ইউনিটের উপরে/নিচে নরমাল পজিশনকে সেট করে।
যদি “position: static” হয়, তাহলে bottom প্রোপার্টির কোনো ইফেক্ট থাকে না।
CSS bottom প্রোপার্টির ভ্যালু-সমূহ
auto– bottom এর কিনারার পজিশন ব্রাউজারে গননা(calculate) করে। এটি ডিফল্ট।
length– bottom এর কিনারার পজিশন পিক্সেল,সেন্টিমিটার ইত্যাদিতে প্রকাশ করা হয়। নেগেটিভ ভ্যালুও গ্রহনযোগ্য।
%-কন্টেইনিং এলিমেন্টের bottom এর কিনারার পজিশন শতকরায়(%) সেট করুন।নেগেটিভ ভ্যালুও গ্রহনযোগ্য।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS clip Property
যখন কোনো Image Containing Element থেকে বড় হয় তবে তা clip প্রোপার্টির মাধ্যমে ছোট করে Containing Element এর আকার করা যায়। clip প্রোপার্টির চারটি কো-অর্ডিনেট(coordinates) থাকে যার মধ্যে সবগুলো কো-অর্ডিনেট(coordinates) ই উপরের বাম কোণ থেকে এলিমেন্টকে ক্লিপড করে। এক্ষেত্রে মনে রাখতে হবে “overflow: visible” হয় তাহলে clip প্রোপার্টি কাজ করবে না।
clip প্রোপার্টির ভ্যালু-সমূহ
auto– এটি ডিফল্ট এক্ষেত্রে কোন ক্লিপ যুক্ত হবে না।
rect– এলিমেন্ট ক্লিপ হবে। ভ্যালিড ভ্যালুগুলো হলোঃ rect (top, right, bottom, left)
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS left Property
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
পরামর্শঃ
যদি absolute পজিশন এলিমেন্টে কোনো পজিশন encestor(পূর্বপুরুষ) না থাকে,এটি ডকুমেন্ট বডি এবং পেইজ স্ক্রলিংয়ের সাথে ব্যবহৃত হয়।
একটি “পজিশন” এলিমেন্ট এমন একটি এলিমেন্ট যার পজিশন স্ট্যাটিক ছাড়া যেকোনো কিছু ই হতে পারে।
রিলেটিভ পজিশন এলিমেন্টে left প্রোপার্টি যুক্ত করা হয় একটি এলিমেন্টের বাম প্রান্তে,তবে এটি ডানে অথবা বামে উভয়দিকেই থাকে।
যদি “Position: Static” দেওয়া হয়,তবে left প্রোপার্টির কোনো প্রতিক্রিয়া হবেনা।
left প্রোপার্টির ভ্যালু-সমূহ
auto– ব্রাউজারটি বামের কিনারের অবস্থানকে হিসাব করে। এটি ডিফল্ট আকারে থাকে।
length– বামপাশে কিনারের অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়।
%-বামপাশে কিনার অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS Right Property
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
পরামর্শঃ
যদি একটি absolute পজিশনের এলিমেন্টের কোনো ancestors পজিশন না থাকে তাহলে এটি ডকুমেন্ট বডি ব্যবহার করে এবং পেজকে স্ক্রোলিং করে।
একটি “positioned” এলিমেন্ট স্ট্যাটিক পজিশন গ্রহন করে।
right প্রোপার্টির ভ্যালু-সমূহ
auto– ব্রাউজারটি ডান কিনারের অবস্থানকে হিসাব করে। এটি ডিফল্ট আকারে থাকে।
length– ডানপাশের কিনারের অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়।
%-ডানপাশের কিনার অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS top Property
CSS absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের উপর থেকে দূরত্ব নির্ধারণ করে।
top প্রোপার্টির ভ্যালু-সমূহ
- auto– ব্রাউজারটি top থেকে হিসাব করে। এটি ডিফল্ট আকারে থাকে।
- length– top অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়।
- %-top অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়।
- initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
- inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS z-index property
HTML Element সমূহের স্ট্যাক অর্ডার(stack order) নির্ধারণ করার জন্য CSS z-index প্রোপার্টি ব্যবহার করা হয়।
একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারে। স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে।
এটি অবশ্যই পড়ুন@ https://www.w3schools.com/cssref/default.asp
এখানের সব ডিটেইলস পড়ার দরকার নেই তবে টাইটেল এবং সাবটাইটেল গুলো অবশ্যই একবার পড়ুন তাহলে সিএস এস এর লার্নিং টা অনেক ইফেক্টিভ হবে @https://www.w3schools.com/css/css_examples.asp
ধন্যবাদ ! হ্যাপি কোডিং ☺️