সিএসএস পজিশন: ধাপে ধাপে সম্পূর্ণ গাইড

সিএসএস position প্রপার্টি একটি এইচটিএমএল পেজে একটি এলিমেন্টের পজিশন মডিফাই করে। top, right, left, এবং bottom প্রপার্টিগুলো একটি এলিমেন্ট কোথায় পজিশন করা আছে সেটি বক্সের কিনারার সাপেক্ষে ডিফাইন করে। position সিএসএস প্রপার্টির পাঁচটি ভ্যালু রয়েছে: static, fixed, relative, sticky, এবং absolute।

একটি স্পেসিফিকেশনের উপর ভিত্তি করে এলিমেন্টগুলো সঠিক জায়গায় পজিশন করা ভালো ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ।

এখানেই সিএসএস position প্রপার্টি কাজে আসে। position প্রপার্টির পাঁচটি ভ্যালু রয়েছে যা আপনি একটি ওয়েব পেজে একটি এলিমেন্ট কীভাবে পজিশন করা উচিত সেটি ডিফাইন করতে ব্যবহার করতে পারেন।

এই টিউটোরিয়াল উদাহরণসহ আলোচনা করবে কীভাবে position প্রপার্টি ব্যবহার করে একটি ওয়েব পেজে একটি এলিমেন্ট পজিশন করবেন। এই টিউটোরিয়াল পড়ার পর, আপনি সিএসএসে position প্রপার্টি ব্যবহার করে একটি ওয়েব পেজে এলিমেন্ট পজিশন করার এক্সপার্ট হয়ে যাবেন।

সিএসএস পজিশন

position প্রপার্টি আপনাকে একটি ওয়েব পেজে একটি এলিমেন্টের পজিশন ডিফাইন করতে দেয়। position প্রপার্টির সিন্ট্যাক্স নিচের মতো:

position: positionType;

position প্রপার্টি ব্যবহার করার অনেক পরিস্থিতি রয়েছে। আপনি নিচের পেজে ফিক্সড একটি নেভিগেশন বার ডিজাইন করতে চাইতে পারেন, উদাহরণস্বরূপ।

একটি ওয়েব পেজে একটি এলিমেন্টের পজিশন সেট করার জন্য আপনি পাঁচটি ভ্যালু ব্যবহার করতে পারেন:

• static
• fixed
• relative
• sticky
• absolute

উপরের পাঁচটি ভ্যালুর যেকোনো একটি ব্যবহার করে, আপনি কীভাবে একটি এলিমেন্ট পজিশন করা উচিত সেটি নির্দিষ্ট করতে পারেন। আপনি top, bottom, left, এবং right প্রপার্টিগুলো ব্যবহার করে এলিমেন্টের পজিশন পেজে আরও ডিফাইন করতে পারেন। আমরা আমাদের এই আর্টিকেলের উদাহরণগুলোর মাধ্যমে এটি কীভাবে কাজ করে সেটি আলোচনা করব।

সিএসএস পজিশন ভ্যালু

আমরা position প্রপার্টির প্রতিটি সম্ভাব্য ভ্যালু কীভাবে ব্যবহার করবেন সেটি এক্সপ্লোর করা শুরু করি। position প্রপার্টির সাথে আপনি যেসব ভ্যালু ব্যবহার করতে পারেন उनमें से প্রতিটির একটি উদাহরণ দেখি।

স্ট্যাটিক পজিশন (Static Position)

এইচটিএমএল এলিমেন্টগুলো ডিফল্টভাবে স্ট্যাটিক olarak পজিশন করা থাকে। এর মানে হলো একটি এলিমেন্ট top, bottom, left, এবং right সিএসএস প্রপার্টিগুলো দ্বারা প্রভাবিত হয় না। ব্রাউজারগুলো অটোমেটিক্যালি এলিমেন্টগুলো স্ট্যাটিক পজিশনে রেন্ডার করে যদি কোড অন্যথায় নির্দেশ না করে।

উদাহরণস্বরূপ, ধরুন আমরা কিছু টেক্সট ধারণকারী একটি বক্স ডিজাইন করছি। আমরা এই বক্সের কন্টেন্ট ডিফল্ট পজিশন ব্যবহার করে পজিশন করতে চাইলে, আমরা এই কোডটি ব্যবহার করতে পারি:

<html> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { position: static; border: 2px solid lightblue; }

উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।

আমরা একটি বক্স তৈরি করেছি যা পেজে স্ট্যাটিক্যালি পজিশন করা আছে। অন্য কথায়, বক্সটি কোনো নির্দিষ্ট উপায়ে পজিশন করা নেই; বরং এর পজিশন ব্রাউজার ডিফল্টের উপর ভিত্তি করে। আমাদের বক্সের একটি ২px-প্রস্থ স olid লাইট ব্লু বর্ডার রয়েছে। এই বর্ডার বক্সকে আরও দৃশ্যমান করে।

ফিক্সড পজিশন (Fixed Position)

fixed ভ্যালু একটি এলিমেন্টকে একটি ওয়েব পেজের একটি নির্দিষ্ট জায়গায় পজিশন করে।

আপনি যখন fixed ভ্যালু ব্যবহার করেন, তখন সেই ফিক্সড এলিমেন্টটি সবসময় একই জায়গায় থাকবে। ব্যবহারকারী ওয়েব পেজটি স্ক্রোল ডাউন করলেও এলিমেন্টটি ফিক্সড থাকবে। এর কারণ হলো এলিমেন্টটি নরম্যাল ওয়েব পেজ ভিউ থেকে রিমুভ হয়ে যায়। একটি এলিমেন্ট fixed ভ্যালু প্রপার্টি ব্যবহার করে পজিশন করতে, আপনাকে অবশ্যই top, right, bottom, এবং left প্রপার্টিগুলো ব্যবহার করতে হবে।

আমরা একটি বক্স তৈরি করতে চাই এবং এটি একটি ওয়েব পেজের বtml-রাইট কোণে ফিক্স করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:

<html> <p>This is the contents of a web page.</p> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { width: 200px; border: 2px solid lightblue; position: fixed; bottom: 0; right: 0; }

উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।

এই উদাহরণে, আমরা fixed পজিশন ভ্যালু ব্যবহার করে একটি বক্স তৈরি করেছি যা একটি ওয়েব পেজের একটি নির্দিষ্ট পজিশনে ফিক্সড। bottom: 0 এবং right: 0 প্রপার্টিগুলো বক্সকে ওয়েব পেজের বtml-রাইট হ্যান্ড কোণে পজিশন করে।

আমরা নির্দিষ্ট করেছি যে আমাদের বক্সের প্রস্থ ২০০px হওয়া উচিত। আমাদের বক্সের একটি ২px স olid লাইট ব্লু বর্ডার হওয়া উচিত। এই স্টাইলগুলো আমাদের বক্সকে সহজে দৃশ্যমান করে।

উপরের ছবিতে আপনি দেখতে পাচ্ছেন, আমাদের বক্স আমাদের ওয়েব পেজের বtml-রাইট হ্যান্ড কোণে পজিশন করা আছে। ব্যবহারকারী যখন স্ক্রোল ডাউন করবে, বক্সটি স্ক্রিনে তার পজিশন রিটেইন করবে। এর মানে ব্যবহারকারী স্ক্রোল করলেও তাদের স্ক্রিনের বtml-রাইটে বক্সটি দেখতে পাবেন।

রিলেটিভ পজিশন (Relative Position)

relative ভ্যালু একটি এলিমেন্টকে এর ডিফল্ট পজিশনের সাপেক্ষে পজিশন করে।

relative ভ্যালু একটি top, bottom, left, বা right প্রপার্টির সাথে যোগ করা হয়। সেই চারটি প্রপার্টি নির্দিষ্ট করে একটি এলিমেন্ট কতটুকু তার ডিফল্ট পজিশন থেকে অফসেট হবে। একটি রিলেটিভলি পজিশন করা বক্স দ্বারা তৈরি স্পেস অন্য কোনো এলিমেন্ট দ্বারা পূরণ হবে না।

উদাহরণস্বরূপ, আপনি যদি একটি এলিমেন্টকে ৫০px লেফট বর্ডারের সাপেক্ষে পজিশন করতে চান, তবে আপনি left প্রপার্টির জন্য একটি ভ্যালু নির্দিষ্ট করবেন। এখানে সে কোডটি দেওয়া হলো যা আমরা এমন একটি বক্স তৈরি করতে ব্যবহার করব:

<html> <p>This is the contents of a web page.</p> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { position: relative; left: 50px; border: 2px solid lightblue; }

উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।

এই উদাহরণে, আমরা রিলেটিভ পজিশনিং সহ একটি বক্স ডিফাইন করেছি। আমরা left প্রপার্টি ব্যবহার করে আমাদের বক্সকে বামে ৫০px অফসেট করেছি। আপনি দেখতে পাচ্ছেন, আমাদের পেজের শুরু এবং আমাদের বক্সের শুরুর মাঝপথে একটি ৫০px গ্যাপ রয়েছে। আমরা এটি position: relative এবং left: 50px প্রপার্টি ব্যবহার করে তৈরি করেছি।

আমাদের বক্সের বামে তৈরি স্পেসটি অন্য কোনো এলিমেন্ট দ্বারা পূরণ হবে না।

স্টিকি পজিশন (Sticky Position)

sticky পজিশন ভ্যালু একটি এলিমেন্টকে রিলেটিভলি পজিশন করে যতক্ষণ না একজন ভিজিটর একটি থ্রেশহোল্ড পার করে। তারপর, এলিমেন্টটি একটি ফিক্সড পজিশন পায়।

sticky পজিশন সম্ভবত relative এবং fixed পজিশনের মিক্সচার। যখন একটি স্টিকি এলিমেন্ট লোড হয়, এটি রিলেটিভলি পজিশন করা থাকে। ব্যবহারকারী পেজে একদম নিচে স্ক্রোল করলে একটি নির্দিষ্ট পয়েন্টের পরে এলিমেন্টটি একটি ফিক্সড পজিশনে বাইন্ড হয়ে থাকে।

স্টিকি পজিশন ব্যবহার করা উপকারী যদি আপনি একটি ডকুমেন্টের ফ্লো সংরক্ষণ করতে চান। আপনি এলিমেন্টগুলিকে একটি নির্দিষ্ট পজিশনে স্টিক করে দিতে পারেন যাতে একজন ভিজিটর সেই এলিমেন্টটি হারিয়ে না ফেলে।

স্টিকি পজিশন সাধারণত নেভিগেশন বারসহ ব্যবহার করা হয় যা ব্যবহারকারী পেজ স্ক্রোল ডাউন করলে স্ক্রিনের টপে স্টিক করে থাকে।

আমরা একটি বক্স চাই যা আমাদের পেজের টপে প্রদর্শিত হবে। এই বক্সটি কিছু টেক্সটের পর প্রদর্শিত হবে এবং ব্যবহারকারী ইমেজ পর্যন্ত স্ক্রোল ডাউন করলে টপে স্টিক করে থাকবে। আমরা এই টাস্ক সম্পন্ন করতে নিচের কোড ব্যবহার করতে পারি:

<html> <p>Lorem ipsum dolor sit amet, … </p> <div> <p class="inner">This is a positioned box.</p> </div> <p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p> <style> .inner { position: sticky; top: 0; border: 2px solid lightblue; }

উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।

এই ছবিতে, আপনি দেখতে পাচ্ছেন যে বক্সটি আমাদের প্রথম প্যারাগ্রাফ টেক্সটের পর প্রদর্শিত হচ্ছে। এর কারণ হলো ব্যবহারকারী এখনও স্ক্রোল ডাউন করে বক্সটি মেটনি। এটি হলো যা ঘটে যখন আমাদের ব্যবহারকারী বক্সটির পাশে স্ক্রোল ডাউন করে:

আমাদের পেজের টপে, আমাদের একটি প্যারাগ্রাফ Lorem ipsum … স্ট্যান্ডার্ড টেক্সট রয়েছে। আমরা This is a positioned box টেক্সট ধারণকারী একটি বক্স এই প্যারাগ্রাফের নিচে ফিক্স করেছি। অতিরিক্তভাবে, যখন ব্যবহারকারী স্ক্রোল ডাউন করে আমরা ডিক্লেয়ার করা পজিশন করা বক্সে পৌঁছায়, বক্সটি স্ক্রিনের টপে বাইন্ড হয়ে যায়। ব্যবহারকারী স্ক্রোল চালিয়ে যাওয়ার সাথে সাথে, বক্সটি তাদের স্ক্রিনের টপে থাকবে।

বক্সটি তার ইনিশিয়াল পজিশনে দুইটি প্যারাগ্রাফ টেক্সটের মাঝপথে ফিরে যাবে। এটি শুধু তখন হবে যখন একজন ব্যবহারকারী বক্সের উপরে স্ক্রোল করবে।

এবসোলিউট পজিশন (Absolute Position)

absolute ভ্যালু একটি এলিমেন্টকে অন্য একটি, ইতিমধ্যে পজিশন করা এলিমেন্টের সাপেক্ষে পজিশন করে।

absolute প্রপার্টি একটি এলিমেন্টকে অন্য একটি, ইতিমধ্যে পজিশন করা এলিমেন্টের সাপেক্ষে পজিশন করে। উদাহরণস্বরূপ, একটি এবসোলিউটলি পজিশন করা এলিমেন্ট হতে পারে একটি বক্সের ভিতরে থাকা টেক্সট যাতে একটি প্যারাগ্রাফ টেক্সট রয়েছে। এই বক্সটির একটি রিলেটিভ বা ফিক্সড পজিশন হতে পারে।

আমরা একটি বক্স ডিজাইন করছি যা আমরা চাই একটি অন্য বক্সের বtml-লেফট কোণে প্রদর্শিত হবে। আমরা এই বক্সগুলো নিচের কোড ব্যবহার করে তৈরি করতে পারি:

<html> <div class="outer"> <p>This is the outer box.</p> <p class="inner">This is a positioned box.</p> </div> <style> .outer { position: relative; border: 2px solid lightblue; width: 300px; height: 300px; } .inner { position: absolute; left: 0; bottom: 0; border: 2px solid pink; }

উপরের কোড এডিটরের "Run" বাটনে ক্লিক করুন HTML/CSS কোডের আউটপুট দেখতে।

আমাদের এইচটিএমএল ফাইলে, আমরা দুটি বক্স ডিফাইন করেছি। আমরা প্রথম বক্সটি একটি <div> ট্যাগ ব্যবহার করে ডিক্লেয়ার করেছি এবং এটিকে outer ক্লাস অ্যাসাইন করেছি। এর মানে বক্সটি outer ক্লাসের সাথে জড়িত সিএসএস স্টাইলগুলো পাবে। আমরা দ্বিতীয় বক্সটি একটি <p> ট্যাগ ব্যবহার করে ডিক্লেয়ার করেছি এবং এটিকে inner ক্লাস অ্যাসাইন করেছি।

আমাদের সিএসএস ফাইলে, আমরা নির্দিষ্ট করেছি যে আমাদের আউটার বক্সটি:

• ওয়েব পেজের অন্যান্য এলিমেন্টের সাপেক্ষে রিলেটিভলি পজিশন করা হবে।
• একটি ২px-প্রস্থ স olid লাইট ব্লু বর্ডার থাকবে।
• ৩০০px প্রস্থ এবং ৩০০px উচ্চতা থাকবে।

আমরা নির্দিষ্ট করেছি যে আমাদের ইনার বক্সটি:

• এবসোলিউটলি পজিশন করা হবে।
• আমাদের আউটার বক্সের বtml-লেফটে পজিশন করা হবে ( left: 0, bottom: 0 ব্যবহার করে)।
• একটি ২px-প্রস্থ স olid পিংক বর্ডার থাকবে।

এই উদাহরণে আমরা পিংক বক্স (inner) কে outer বক্সের বtml-লেফটে পজিশন করেছি। যদি আমরা fixed কীওয়ার্ড ব্যবহার করতাম, তবে পিংক বক্স আমাদের ওয়েব পেজের বtml-এ পজিশন করা হত।

উপসংহার

সিএসএস position প্রপার্টি একটি ওয়েব পেজে একটি এলিমেন্টের পজিশন ডিফাইন করে। top, right, bottom, এবং left প্রপার্টিগুলো একটি এলিমেন্টকে ওয়েব পেজে একটি নির্দিষ্ট জায়গায় প্লেস করে। এখন আপনি সিএসএসে position প্রপার্টি ব্যবহার করে এলিমেন্ট পজিশন করার প্রো 처럼 প্রস্তুত!