# সিএসএস পজিশন (CSS Position) 🚞 Post No:22 আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা **CSS Position** সম্পর্কে জানবো। আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন: [**hashnode.com/@Labib**](http://hashnode.com/@Labib) **সিএসএস পজিশন (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 তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে। নিচের উদাহরণ লক্ষ্য করুন: ![](https://lh4.googleusercontent.com/VQisbRZKj_I9WEFC9u98xQatc4ac6VVeVf1KnTzFV1-SBAuU-Vaia1x7KAvvc8q4mDlEttZXUf4oIfVLGZwyR583-kYS4UzahQEsFq-d0sQI9wzt8AHobIPK9AjpHVGUKpvZ76p2qAU4y8IdxEw0yWSTtVr0eANQNv2qm15JERwIu2J4EDTJ7-G6UH3J align="left") ```xml

position: static;

An element with position: static; is not positioned in any special way; i always positioned according to the normal flow of the page:

This div element has position: static;
``` ### **Output** ![](https://lh4.googleusercontent.com/oj8gaNwHau2wGBQ33v8Ly6mkAlHXwcQl6LYG-maDYFDTHxwW-Vg0RPi4kNSKTI31fHDi_Ey7XpT0YhAW_qZqUTykAn1EhguJ_LuVSsfn3muvEuJlNBWe-qfHzTZk5A9bHqWWNDgu24YYym6yQA-bxoY1YWmu5tdMNcqxQheHyD1xD7o-rVaapiqp-96f align="left") **ব্যাখ্যা:** উপরের উদাহরণে সিলেক্টর .static-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে। ## **position:relative;** position:relative; ও static এর মতই পার্থক্য হচ্ছে এখানে আপনি চাইলে top, left, bottom, right এবং z-index ব্যবহার করে HTML Element কে তার অবস্থান থেকে সরাতে পারবেন। এমনকি অন্য একটা element এর উপর ও বসাতে পারবেন। relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে। নিচের উদাহরণ দেখুন: ![](https://lh3.googleusercontent.com/3d1qqA78hBDwDUQmJC9UnMJUbchO_YfAPQOLkoNWNG3J27tBPFyLOi9QrWioKL8zuUJ4VVEnzaYi5j5Vak2OXFDAWgE6IDr62mCYX_aQ0eQvc22KY-WMXdmXzO2_MplO0sEHXzdbQxzuF0_M88Dn3ctIM3cNFWEVT9PwziD6agxs3xZcSFDJE8JsV0S2 align="left") ```xml Position Static Example
0ne
Two
Threec/div> ``` **Output** ![](https://lh4.googleusercontent.com/89Ukotby4uJN_IpyVgKoDhMznzcmevODksqgMzOFRJeDpgCc8hbLCAT2swNJ_UeyjIFZ-US018wN69B4zDApVScShNHfVTQYI6CKJ7ru3EM2a8T9N9Xa0lncmdUUYEmsmwaDKOJmetLsauZxl0Qicij8g_IoTALFsso3DKuYQBbcZ2PgH_HjT4bsoyoR align="left") \*\*ব্যাখ্যা:\*\*উপরের উদাহরণে সিলেক্টর #two-তে position: absolute; ব্যবহার করায় পূর্বসুরী(ancestor) HTML Element এর সাপেক্ষে সিলেক্টর #two নিজের অবস্থানের পরিবর্তন ঘটিয়েছে। ## **position:fixed;** **position: fixed;** যুক্ত HTML Element গুলো viewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না। চলুন একটা উদাহরণ দিয়ে দেখা যাক: ![](https://lh3.googleusercontent.com/415fVudFgH6UXzaoF6MZkq7m7wzXFOCeGo07XvcHCjYlaGx8DTq76305WtbqALDoiy-OroN8SCW2nLJNcFFjFd1VotpJidL4esFCgbhEC8TYXwpu2sA6zUUYspnAgT8BMztemu7xerSMZ7b7FdqoPXeE7ae6sbb3ZYX_47wofxpyMsJ_apd-2wSlsTFp align="left") ```xml Css Position Fixed
0ne
Two
Three
Four
Fivec/div>
Six
``` ### **Output** ![](https://lh3.googleusercontent.com/fLuPRwa6dlCFVLOZQVmPhnukdbm9pGBmDcnV25ZhNex2OfKhMQjZbexqkL6EHaShFLitOdyS5-uvY3m3n9Is0uBVaiJEHcOGRc2erIbNy2Z1TJL5OGNZCer5aNDi0wG68XAA7o9oUqDENdn-VdZccfGubfcb82VnFdhm3KWT2dNe0zqg64YIW_czWOAS align="left") *CSS Position Fixed* **ব্যাখ্যা:** উপরের উদাহরণে সিলেক্টর #three-তে position: fixed; ব্যবহার করায় এটি viewport এর সাপেক্ষে পজিশন ফিক্সড রয়েছে। এখন যদি আপনি ব্রউজারকে মিনিমাইজ করেন , তাহলে দেখবে এটি স্ক্রল করবে , #three সিলেক্টর ফিক্সড থাকবে। ## **position: sticky;** position: sticky; যুক্ত HTML Element ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন হয়। তা ছাড়া স্ক্রল পজিশনের উপর ভিত্তি করে position: sticky একইসাথে Relative এবং Fixed পজিশনের মধ্যে toggle করে। চলুন একটা উদাহরণ দিয়ে দেখা যাক: ![](https://lh6.googleusercontent.com/9rtmgy4WlVwYJVCbYY4C0a9qhNCRu1xaPleZdxwhay4C_T9z4B-rA8LgIfAXnKdAyZtOR6jIhH-w1Bvh2HO6yg8i9n9EesRXFxuEMmZR0bapPXB5l1M9uN9ncqtkxi4dmq2jJ022_5S9ia15pYZqnwCq6mcKq2jp96zhRrEH0D5tPcZaRwC4LFQOBd2z align="left") ```xml Css Position Sticky Example

Alphabetical 1ist of countries
Afghanistan
,
Argentinac
Australiac
Austriac
Armeniac
B
Bangladesh
Bahrain
``` ### **Output** ![](https://lh5.googleusercontent.com/dDgbjYqlxaxVBHI4LRXGd6pJPV8clXfMx9G4skqZgB_2E4yuVgfoXCmCYdZsoMh5xvgYPqfT6vhc-wbT9jeWRPTDzKReZTNai0OziprX9UyPpsG-75Ak9ySCDylGGGa5KckPGa_ItH77v-SDn4TF7SXeXcQaEF137hUFO4Deyf88lPQOzrMi11WncMzV align="left") *CSS Position Sticky* ## **এবার চলুন এক নজরে 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 left Property \*\*absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে। ### **পরামর্শঃ** * যদি absolute পজিশন এলিমেন্টে কোনো পজিশন encestor(পূর্বপুরুষ) না থাকে,এটি ডকুমেন্ট বডি এবং পেইজ স্ক্রলিংয়ের সাথে ব্যবহৃত হয়। * একটি “পজিশন” এলিমেন্ট এমন একটি এলিমেন্ট যার পজিশন স্ট্যাটিক ছাড়া যেকোনো কিছু ই হতে পারে। * রিলেটিভ পজিশন এলিমেন্টে left প্রোপার্টি যুক্ত করা হয় একটি এলিমেন্টের বাম প্রান্তে,তবে এটি ডানে অথবা বামে উভয়দিকেই থাকে। * যদি “Position: Static” দেওয়া হয়,তবে left প্রোপার্টির কোনো প্রতিক্রিয়া হবেনা। **left প্রোপার্টির ভ্যালু-সমূহ** * **auto**– ব্রাউজারটি বামের কিনারের অবস্থানকে হিসাব করে। এটি ডিফল্ট আকারে থাকে। * **length**– বামপাশে কিনারের অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়। * **%**\-বামপাশে কিনার অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়। * **initial**– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। * **inherit**– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। ## **CSS Right Property** absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে। ### **পরামর্শঃ** * **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 প্রোপার্টি ব্যবহার করা হয়। একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারে। স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে। ***—ধন্যবাদ***