CSS অবস্থান বৈশিষ্ট্য একটি HTML পৃষ্ঠায় একটি উপাদানের অবস্থান পরিবর্তন করে৷ উপরের, ডান, বাম এবং নীচের বৈশিষ্ট্যগুলি বক্সের প্রান্তের সাপেক্ষে একটি উপাদান কোথায় অবস্থিত তা নির্ধারণ করে। অবস্থান CSS সম্পত্তির পাঁচটি মান রয়েছে:স্থির, স্থির, আপেক্ষিক, স্টিকি এবং পরম।
একটি স্পেসিফিকেশনের উপর ভিত্তি করে সঠিক জায়গায় উপাদানের অবস্থান নির্ধারণ ভাল ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ।
এখানেই CSS পজিশন প্রপার্টি আসে। পজিশন প্রপার্টির পাঁচটি মান আছে যা আপনি একটি ওয়েব পেজে কোন এলিমেন্টের অবস্থান নির্ধারণ করতে ব্যবহার করতে পারেন।
এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, কিভাবে পজিশন প্রপার্টি ব্যবহার করে একটি ওয়েব পেজে একটি এলিমেন্ট স্থাপন করতে হয়। এই টিউটোরিয়ালটি পড়ার পরে, আপনি সিএসএস-এ একটি ওয়েব পৃষ্ঠায় উপাদানগুলির অবস্থানের জন্য অবস্থানের বৈশিষ্ট্য ব্যবহার করতে বিশেষজ্ঞ হবেন৷
CSS অবস্থান
অবস্থান বৈশিষ্ট্য আপনাকে একটি ওয়েব পৃষ্ঠায় একটি উপাদানের অবস্থান নির্ধারণ করতে দেয়। অবস্থান সম্পত্তির জন্য সিনট্যাক্স নিম্নরূপ:
position: positionType;
অবস্থান সম্পত্তি দরকারী হতে পারে যেখানে পরিস্থিতিতে একটি সংখ্যা আছে. আপনি সিদ্ধান্ত নিতে পারেন যে আপনি এটি একটি নেভিগেশন বার ডিজাইন করতে চান যা পৃষ্ঠার নীচে স্থির করা আছে, উদাহরণস্বরূপ।
পাঁচটি মান আছে যা আপনি একটি ওয়েব পৃষ্ঠায় একটি উপাদানের অবস্থান সেট করতে ব্যবহার করতে পারেন:
- স্থির
- স্থির
- আত্মীয়
- স্টিকি
- পরম
উপরের পাঁচটি মানগুলির মধ্যে একটি ব্যবহার করে, আপনি একটি উপাদানকে কীভাবে অবস্থান করা উচিত তা নির্দিষ্ট করতে পারেন। পৃষ্ঠায় উপাদানটির অবস্থান আরও সংজ্ঞায়িত করতে আপনি উপরের, নীচে, বাম এবং ডান বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। আমরা এই নিবন্ধের জন্য আমাদের উদাহরণগুলিতে এটি কীভাবে কাজ করে তা নিয়ে আলোচনা করব।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
সিএসএস অবস্থানের মান
অবস্থান সম্পত্তির প্রতিটি সম্ভাব্য মান কীভাবে ব্যবহার করা যায় তা আমরা অন্বেষণ শুরু করতে পারি। চলুন আপনি অবস্থান সম্পত্তির সাথে ব্যবহার করতে পারেন এমন প্রতিটি মানগুলির একটি উদাহরণ দিয়ে চলুন।
স্থির অবস্থান
এইচটিএমএল উপাদানগুলি ডিফল্টরূপে স্ট্যাটিক হিসাবে অবস্থান করে। এর মানে হল যে একটি উপাদান উপরে, নীচে, বাম এবং ডান CSS বৈশিষ্ট্য দ্বারা প্রভাবিত হয় না। ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে উপাদানগুলিকে স্ট্যাটিক অবস্থানে রেন্ডার করে যদি না কোডটি অন্যথায় নির্দেশ করে৷
উদাহরণস্বরূপ, ধরুন আমরা একটি বাক্স ডিজাইন করছি যাতে কিছু পাঠ্য রয়েছে। যদি আমরা ডিফল্ট পজিশন ব্যবহার করে এই বাক্সের বিষয়বস্তুর অবস্থান করতে চাই, আমরা এই কোডটি ব্যবহার করতে পারি:
<html>
<div class="outer">
<p>This is a positioned box.</p>
</div>
<style>
.outer {
position: static;
border: 2px solid lightblue;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমরা একটি বাক্স তৈরি করেছি যা পৃষ্ঠায় স্থিরভাবে অবস্থান করে। অন্য কথায়, বাক্সটি কোন নির্দিষ্ট উপায়ে অবস্থান করা হয় না; বরং, এর অবস্থান ব্রাউজার ডিফল্টের উপর ভিত্তি করে। আমাদের বাক্সে একটি 2px-চওড়া কঠিন হালকা নীল সীমানা রয়েছে৷ এই সীমানা বাক্সটিকে আরও দৃশ্যমান করে তোলে।
স্থির অবস্থান
নির্দিষ্ট মান একটি ওয়েব পৃষ্ঠার একটি নির্দিষ্ট স্থানে একটি উপাদান অবস্থান করে।
আপনি যখন স্থির মান ব্যবহার করেন, তখন যে উপাদানটি স্থির করা হয় তা সবসময় একই জায়গায় থাকবে। ব্যবহারকারী ওয়েব পৃষ্ঠার নিচে স্ক্রোল করলেও উপাদানটি স্থির থাকবে। এর কারণ হল সাধারণ ওয়েব পেজ ভিউ থেকে উপাদানটি সরানো হয়েছে। নির্দিষ্ট মানের বৈশিষ্ট্য ব্যবহার করে একটি উপাদানের অবস্থান করতে, আপনাকে অবশ্যই উপরের, ডান, নীচে এবং বাম বৈশিষ্ট্যগুলি ব্যবহার করতে হবে।
আমরা একটি বাক্স তৈরি করতে চাই এবং এটি একটি ওয়েব পৃষ্ঠার নীচের ডানদিকের কোণায় ঠিক করতে চাই৷ আমরা নিম্নলিখিত কোড ব্যবহার করে তা করতে পারি:
<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;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
এই উদাহরণে, আমরা একটি বাক্স তৈরি করতে নির্দিষ্ট অবস্থানের মান ব্যবহার করেছি যা ওয়েব পৃষ্ঠায় একটি নির্দিষ্ট অবস্থানে স্থির করা হয়েছে। নীচে:0 এবং ডানদিকে:0 বৈশিষ্ট্যগুলি ওয়েব পৃষ্ঠার নীচে ডানদিকের কোণায় বাক্সটিকে অবস্থান করে৷
আমরা উল্লেখ করেছি যে আমাদের বক্সের প্রস্থ 200px হওয়া উচিত। আমাদের বাক্সে একটি 2px কঠিন হালকা নীল সীমানা থাকা উচিত। এই শৈলীগুলি আমাদের বাক্সটিকে সহজেই দৃশ্যমান করে তোলে৷
আপনি উপরের ছবিতে দেখতে পাচ্ছেন, আমাদের বাক্সটি আমাদের ওয়েব পৃষ্ঠার নীচের ডানদিকের কোণায় অবস্থিত। যখন ব্যবহারকারী নীচে স্ক্রোল করে, বাক্সটি স্ক্রিনে তার অবস্থান ধরে রাখবে। এর মানে হল যে ব্যবহারকারীরা তাদের স্ক্রিনের নীচে ডানদিকে বাক্সটি দেখতে থাকবে, এমনকি যখন তারা স্ক্রল করবে।
আপেক্ষিক অবস্থান
আপেক্ষিক মান একটি উপাদানকে তার ডিফল্ট অবস্থানের সাথে সম্পর্কিত করে।
আপেক্ষিক মান একটি উপরে, নীচে, বাম, বা ডান সম্পত্তি ছাড়াও ব্যবহৃত হয়। এই চারটি বৈশিষ্ট্য নির্দিষ্ট করে যে কীভাবে একটি উপাদান তার ডিফল্ট অবস্থান থেকে অফসেট হবে। তুলনামূলকভাবে অবস্থান করা বাক্স দ্বারা তৈরি স্থান অন্য উপাদান দ্বারা পূর্ণ হবে না।
উদাহরণস্বরূপ, আপনি যদি 50px বাম সীমানার সাথে সম্পর্কিত একটি উপাদানের অবস্থান করতে চান তবে আপনি বাম সম্পত্তির জন্য একটি মান নির্দিষ্ট করবেন। এইরকম একটি বাক্স তৈরি করতে আমরা যে কোডটি ব্যবহার করব তা এখানে:
<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;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
এই উদাহরণে, আমরা আপেক্ষিক অবস্থান সহ একটি বাক্স সংজ্ঞায়িত করেছি। আমরা আমাদের বক্সকে 50px দ্বারা বাম দিকে অফসেট করতে বাম সম্পত্তি ব্যবহার করেছি। আপনি দেখতে পাচ্ছেন, আমাদের পৃষ্ঠার শুরু এবং আমাদের বক্সের শুরুর মধ্যে একটি 50px ব্যবধান রয়েছে। আমরা অবস্থান ব্যবহার করে এটি তৈরি করেছি:আপেক্ষিক এবং বাম:50px বৈশিষ্ট্য।
আমাদের বাক্সের বাম দিকে তৈরি স্থান অন্য কোনো উপাদান দ্বারা পূর্ণ হবে না।
স্টিকি অবস্থান
স্টিকি অবস্থানের মান একটি উপাদানকে তুলনামূলকভাবে অবস্থান করে যতক্ষণ না একজন দর্শক একটি থ্রেশহোল্ড অতিক্রম করে। তারপরে, উপাদানটির একটি নির্দিষ্ট অবস্থান রয়েছে।
আঠালো অবস্থান মূলত আপেক্ষিক এবং স্থির অবস্থানের মিশ্রণ। যখন একটি স্টিকি উপাদান লোড হয়, এটি তুলনামূলকভাবে অবস্থান করে। ব্যবহারকারী পৃষ্ঠার একটি নির্দিষ্ট বিন্দু অতিক্রম করার পরে উপাদানটি একটি নির্দিষ্ট অবস্থানে আবদ্ধ থাকে৷
আপনি যদি একটি নথির প্রবাহ সংরক্ষণ করতে চান তবে একটি স্টিকি অবস্থান ব্যবহার করা দরকারী। আপনি উপাদানগুলিকে একটি নির্দিষ্ট অবস্থানে আটকে রাখতে পারেন যাতে কোনও দর্শক সেই উপাদানটির দৃষ্টিশক্তি হারাতে না পারে৷
স্টিকি পজিশনটি সাধারণত নেভিগেশন বারগুলির সাথে ব্যবহার করা হয় যেটি স্ক্রিনের শীর্ষে লেগে থাকে যখন ব্যবহারকারী পৃষ্ঠাটি নীচে স্ক্রোল করে।
আমরা আমাদের পৃষ্ঠার শীর্ষে একটি বাক্স দেখতে চাই। এই বাক্সটি কিছু পাঠ্যের পরে উপস্থিত হওয়া উচিত এবং তারপরে ব্যবহারকারী যখন চিত্রটিতে স্ক্রোল করে নিচে যায় তখন শীর্ষে আটকে থাকা উচিত। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
<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;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
এই ছবিতে, আপনি দেখতে পাচ্ছেন যে বাক্সটি আমাদের পাঠ্যের প্রথম অনুচ্ছেদের পরে উপস্থিত হয়েছে। এর কারণ হল ব্যবহারকারী এখনও স্ক্রোল করে নিচের বাক্সটির সাথে দেখা করেনি। যখন আমাদের ব্যবহারকারী বাক্সের পাশ দিয়ে নিচে স্ক্রোল করে তখন এটি ঘটে:
আমাদের পৃষ্ঠার শীর্ষে, আমাদের Lorem ipsum … এর একটি অনুচ্ছেদ রয়েছে আদর্শ পাঠ্য। আমরা পাঠ্য সম্বলিত একটি বাক্স ঠিক করেছি This is a positioned box এই অনুচ্ছেদের নীচে। অতিরিক্তভাবে, যখন ব্যবহারকারী আমরা ঘোষিত পজিশন বাক্সে স্ক্রোল করে, তখন বাক্সটি স্ক্রিনের শীর্ষে আবদ্ধ থাকে। ব্যবহারকারী যতই স্ক্রোলিং করতে থাকবে, বক্সটি তাদের স্ক্রিনের শীর্ষে থাকবে।
পাঠ্যের দুটি অনুচ্ছেদের মধ্যে বাক্সটি তার প্রাথমিক অবস্থানে ফিরে আসবে। এটি তখনই ঘটবে যখন একজন ব্যবহারকারী বাক্সের উপরে স্ক্রোল করবেন।
পরম অবস্থান
পরম মান একটি উপাদানকে অন্য একটি, ইতিমধ্যে অবস্থান করা উপাদানের সাপেক্ষে অবস্থান করে।
পরম সম্পত্তি একটি উপাদানকে অন্য, ইতিমধ্যে অবস্থান করা উপাদানের সাপেক্ষে অবস্থান করে। উদাহরণস্বরূপ, একটি পরম অবস্থানযুক্ত উপাদান একটি বাক্সের ভিতরে পাঠ্য হতে পারে যাতে পাঠ্যের একটি অনুচ্ছেদ অন্তর্ভুক্ত থাকে। এই বাক্সের একটি আপেক্ষিক বা স্থির অবস্থান থাকতে পারে।
আমরা একটি বাক্স ডিজাইন করছি যা আমরা অন্য একটি বাক্সের নীচে বাম দিকের কোণায় উপস্থিত হতে চাই। আমরা নিম্নলিখিত কোড ব্যবহার করে এই বাক্সগুলি তৈরি করতে পারি:
<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;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের HTML ফাইলে, আমরা দুটি বক্স সংজ্ঞায়িত করি। আমরা একটি
ট্যাগ ব্যবহার করে দ্বিতীয় বাক্সটি ঘোষণা করি এবং এটিকে অভ্যন্তরীণ শ্রেণিতে বরাদ্দ করি .
আমাদের CSS ফাইলে, আমরা নির্দিষ্ট করি যে আমাদের বাইরের বাক্সটি করা উচিত:
- ওয়েব পৃষ্ঠার অন্যান্য উপাদানের তুলনায় অবস্থান করুন।
- একটি 2px-চওড়া কঠিন হালকা নীল বর্ডার আছে।
- 300px চওড়া এবং 300px লম্বা হোন।
আমরা নির্দিষ্ট করি যে আমাদের ভিতরের বাক্সটি করা উচিত:
- অবশ্যই অবস্থান করুন।
- আমাদের বাইরের বাক্সের নীচে বাম দিকে অবস্থান করুন (বাম:0, নীচে:0 ব্যবহার করে)।
- একটি 2px-চওড়া কঠিন গোলাপী বর্ডার আছে।
এই উদাহরণে আমরা গোলাপী বাক্স (inner) স্থাপন করেছি ) outer নীচে বাম দিকে বাক্স আমরা যদি স্থির কীওয়ার্ড ব্যবহার করি, অন্যদিকে, গোলাপী বক্সটি আমাদের ওয়েব পৃষ্ঠার নীচে অবস্থিত হবে।
উপসংহার
CSS অবস্থান বৈশিষ্ট্য একটি ওয়েব পৃষ্ঠায় একটি উপাদানের অবস্থান নির্ধারণ করে। উপরের, ডান, নীচে এবং বাম বৈশিষ্ট্যগুলি ওয়েব পৃষ্ঠায় একটি নির্দিষ্ট জায়গায় একটি উপাদান রাখে। এখন আপনি একজন পেশাদারের মত পজিশন প্রপার্টি ব্যবহার করে CSS-এ পজিশনিং এলিমেন্ট শুরু করতে প্রস্তুত!
