position বৈশিষ্ট্য

position বৈশিষ্ট্য এলিমেন্টগুলির অবস্থান নির্ধারণের পদ্ধতি নির্দিষ্ট করে। এই বৈশিষ্ট্যটি প্রায়শই top, right, bottom, left, এই বৈশিষ্ট্যগুলির সাথে একত্রে ব্যবহৃত হয়, যেগুলি যথাক্রমে উপরে, ডানে, নীচে, বামে প্রান্তিক ব্যবধান সেট করে।

সিনট্যাক্স

cssসিলেক্টর {
  position: absolute | relative | fixed | static | sticky;
}

position-এর মান

ডিফল্ট মান: static।

উদাহরণ . সম্পূর্ণ অবস্থান

এলিমেন্টটিকে ছোট প্রান্তিক ব্যবধান সহ স্ক্রিনের উপরের বাম কোণে স্থাপন করা যাক:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

উদাহরণ . সম্পূর্ণ অবস্থান

এবং এখন এলিমেন্টটিকে ছোট প্রান্তিক ব্যবধান সহ স্ক্রিনের উপরের ডান কোণে স্থাপন করা যাক:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

উদাহরণ . স্থির অবস্থান

স্থির অবস্থানে এলিমেন্টটি স্ক্রল করার সময়ও তার জায়গায় থাকবে:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

উদাহরণ . আপেক্ষিক অবস্থান

আপেক্ষিক অবস্থানে এলিমেন্টটি স্থানান্তরিত হয় তার স্বাভাবিক অবস্থানের সাপেক্ষে, কিন্তু অন্যান্য এলিমেন্টগুলি এমনভাবে আচরণ করে, যেন এলিমেন্টটি স্থানান্তরিত হয়নি:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

উদাহরণ . নেস্টিং

যদি প্যারেন্টের position বৈশিষ্ট্যের মান relative হয়, তবে সম্পূর্ণ অবস্থানযুক্ত এলিমেন্টগুলি প্যারেন্টের সাপেক্ষে অবস্থান নির্ধারণ করবে:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

উদাহরণ . নেস্টিং

যদি প্যারেন্টের position বৈশিষ্ট্যের মান absolute হয়, তবে সম্পূর্ণ অবস্থানযুক্ত এলিমেন্টগুলি প্যারেন্টের সাপেক্ষে অবস্থান নির্ধারণ করবে:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

উদাহরণ . স্টিকি অবস্থান

যদি একটি এলিমেন্টের জন্য position বৈশিষ্ট্যের মান sticky হয়, তবে এলিমেন্টটি relative-এর মতো আচরণ করে, যতক্ষণ না এটি নির্দিষ্ট অবস্থানে স্ক্রল করার সময় পৌঁছায়, তারপর সেখানে আটকে যায়। আসুন একটি স্টিকি হেডার তৈরি করি:

html<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

উদাহরণ . অবস্থান ছাড়া

যদি একটি এলিমেন্টকে অবস্থান উল্লেখ না করে সম্পূর্ণ অবস্থান নির্ধারণ করা হয়, তবে এলিমেন্টটি সেই স্থানেই থাকবে, যেখানে এটি অবস্থান ছাড়াই ছিল, কিন্তু অন্যান্য এলিমেন্টগুলি এটি দেখতে পাবে না:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

উদাহরণ . একটি অক্ষ

সম্পূর্ণ অবস্থানে শুধুমাত্র একটি অক্ষে অবস্থান নির্ধারণ করা যেতে পারে। উদাহরণস্বরূপ, যদি আমরা top বৈশিষ্ট্য সেট করি, তবে উল্লম্বভাবে এলিমেন্টটি প্রয়োজনীয় অবস্থানে চলে যাবে, এবং অনুভূমিকভাবে সেখানেই থাকবে, যেখানে ছিল:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

উদাহরণ . সব অবস্থান

সম্পূর্ণ অবস্থানে প্রস্থ এবং উচ্চতা না দিয়েই সব দিকে অবস্থান নির্ধারণ করা যেতে পারে। এই ক্ষেত্রে এলিমেন্টটি প্যারেন্ট ব্লকের কেন্দ্রে অবস্থান করবে:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

আরও দেখুন