X

X

X

CSS Property Layout - ইলামেন্টের অবস্থান


কোনো ইলামেন্টের অবস্থান বিভিন্নভাবে নির্ধারণ করার জন্য position property ব্যবহার করা হয়।


position Property-এর খুঁটিনাটি

position property এর মূল কাজ হচ্ছে ওয়েবপেজে কোনো ইলামেন্টকে সঠিকভাবে উপস্থাপণ করা। এর পাঁচটি মান রয়েছে। যেমন-
:

  • static
  • relative
  • fixed
  • absolute
  • sticky

সাধারণত কোনো ইলামেন্টকে top, bottom, left, এবং right প্রপার্টিসমূহ ব্যবহার করে কন্টেইনার ইলামেন্টের ভেতরে উপস্থাপণ করা হয়। কিন্তু যদি এর position property সেট করা না হয় তবে এটি সঠিকভাবে কাজ করবে না। কাজেই কোনো ইলামেন্টকে top, bottom, left, এবং right ইত্যাদি অবস্থানে উপস্থাপন করার আগে position প্রপার্টির মান সেট করতে হবে।


position: static;

HTML element ইলামেন্টসমূহ একটি নির্দিষ্ট অবস্থানে উপস্থাপণ করার জন্য ব্যবহৃত হয়। static ইলামেন্টসমূহ top, bottom, left, এবং right ইত্যাদি দ্বারা পরিবর্তন করা যায় না।

position: static; প্রপার্টি বিশিষ্ট কোনো ইলামেন্ট ওয়েবপেজে অন্যান্য ইলামেন্টের সাপেক্ষে উপস্থাপিত হয়।

<div> ইলামেন্টটি position: static; দ্বারা উপস্থাপিত হয়েছে।

নিচে ব্যবহৃত সিএসএস কোডটি দেওয়া হলো:

Code Example

<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


position: relative;

position: relative; বিশিষ্ট কোনো ইলামেন্ট স্বাভাবিকভাবে ওয়েবপেজে উপস্থাপিত হয়।

এই ইলামেন্টকে যখন ডান, বাম, উপরে বা নিচে (top, bottom, left, এবং right) উপস্থাপন করা হয়, তখন এটি সেভাবে উপস্থাপিত হয়। এটি অন্যান্য ইলামেন্টের স্বাভাবিক অবস্থানের উপর কোনো প্রভাব ফেলে না।

<div> element-টিতে position: relative; প্রপার্টি সেট করা হয়েছে।

নিচে ব্যবহৃত সিএসএস কোডটি দেওয়া হলো:

Code Example

<style>
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


position: fixed;

যখন কোনো ইলামেন্টের জন্য position: fixed; প্রপার্টি ব্যবহার করা হয় এটি ভিউপোর্টের সাপেক্ষে একটি নির্দিষ্ট অবস্থানে উপস্থাপিত হয়। এর অব্সথান পেজ স্ক্রল করার সাপেক্ষে পরিবর্তিত হয় না।

পেজের ডানদিকে নিচে দেখুন, একটি ফিক্সড ইলামেন্টকে উপস্থাপণ করা হয়েছে:

Code Example

<style>
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

This <div> element has position: fixed;

position: absolute;

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

নিচে একটি ছোটো উদাহরণ দেওয়া হলো:

<div> ইলামেন্টটিতে position: relative; সেট করা আছে।

এই <div> টিতে position: absolute; সেট করা আছে।

ব্যবহৃত উদাহরণের CSS কোড নিচে উপস্থাপণ করা হলো:

Code Example

<style>
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


position: sticky;

position: sticky; বিশিষ্ট কোনো ইলামেন্টকে পেজের স্ক্রলের সাপেক্ষে তার অবস্থান নির্ধারণ করা যায়।

sticky element তার স্ক্রলের পরিমানের উপর ভিত্তি করে relativefixed ইত্যাদিতে তার পজিশন পরিবর্তন করে। অর্থাৎ, যখন এটি তার কাঙ্খিত অবস্থানে পৌছায় তখন ফিক্সড হয়, আবার যখন স্বাভাবিক অবস্থানে যায় তখন রিলেটিভ হয়।

বি:দ্র: Internet Explorer, Edge 15 এবং এর আগের ভার্শনসমূহ sticky position সাপোর্ট করে না। Safari ব্রাউজারে -webkit- prefix ব্যবহার করতে হবে (নিচের উদাহরণটি দেখুন)। এই পজিশন প্রপার্টিকে যথাযথভাবে কার্যকর করার জন্য top, right, bottom অথবা left পজিশন প্রপার্টি অবশ্যই ব্যবহার করতে হবে।

এই উদাহরণে যখন পেজের স্ক্রল মান (top: 0) হয়, তখন এটি ফিক্সড পজিশন মুডে চলে যায়। ফলে এই অবস্থানে উক্ত ইলামেন্ট আর স্ক্রল হয় না।

Code Example

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Overlapping Elements

ওয়েবপেজের ইলামেন্টকে যখন বিভিন্ন পজিশনে উপস্থাপণ করা হয়, তখন তারা একে অপরের উপর ওভার‍ল্যাপ হতে পারে।

z-index property ব্যবহার করে উক্ত ইলামেন্টসমূহের স্ট্যাক ইনডেক্স নির্ধারণ করা হয়। অর্থাৎ, কোন ইলামেন্ট কার উপরে, বা কার নিচে হবে তা ক্রমান্বয়ে সেট করা হয়। তবে যদি কোনো পজিশন্ড ইলামেন্টের z-index property প্রপার্টি নির্ধারণ করা না হয়, তবে পূর্বের ইলামেন্টর ইনডেক্স ছোটো এবং পরেরটির বেশি হয়। অর্থাৎ, পরের ইলামেন্টসমূহ স্বাভাবিকভাবে উপরে উপস্থাপিত হবে।

কোনো পজিশন্ড ইলামেন্টের ধ্বনাত্বক বা ঋণাত্মক ইনডেক্স মান হতে পারে:

এটি একটি হেডিং ইলামেন্ট।

যেহেতু এই ইলামেন্টর z-index = -1, কাজেই এটি টেক্সটের নিচে উপস্থাপিত হবে।

Code Example

<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বড় স্ট্যাক ইনডেক্স বিশিষ্ট ইলামেন্ট ছোটো স্ট্যাক ইনডেক্স বিশিষ্ট ইলামেন্টের উপরে উপস্থাপিত হয়।


ছবির উপরে টেক্সট উপস্থাপণ

নিচের ছবির উপরে টেক্সট উপস্থাপণের উদাহরণ দেওয়া হলো:

Example

Norway

Bottom Left
Top Left
Top Right
Bottom Right
Centered

নিজে নিজে চেষ্টা করুণ:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »


আরও কিছু উদাহরণ

Set the shape of an element


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »


CSS Positioning Property সমূহ

প্রপার্টি বর্ণনা
bottom পজিশন্ড ইলামেন্টের নিচের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।
clip Absolute ইলামেন্টকে ক্লিপ করার জন্য ব্যবহৃত হয়।
left পজিশন্ড ইলামেন্টের বামের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।
position পজিশন্ড ইলামেন্টের ধরণ নির্ধারণ করার জন্য ব্যবহৃত হয়।
right পজিশন্ড ইলামেন্টের ডান পাশের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।
top পজিশন্ড ইলামেন্টের উপরের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।
z-index পজিশন্ড ইলামেন্টের স্ট্যাক ইনডেক্স নির্ধারণ করার জন্য ব্যবহৃত হয়।