CSS-এ উপাদানগুলির আপেক্ষিক অবস্থান

আপেক্ষিক অবস্থান সম্পত্তির জন্য relative মান ব্যবহার করে নির্দিষ্ট করা হয় position। এই ধরনের অবস্থান অনুমতি দেয় উপাদানগুলিকে তাদের বর্তমান অবস্থান থেকে একটি নির্দিষ্ট পরিমাণে স্থানান্তরিত করতে। এক্ষেত্রে পৃষ্ঠার অন্যান্য সমস্ত উপাদান মনে করবে, যে উপাদানটি সেখানেই দাঁড়িয়ে আছে যেখানে এটি最初থেকে দাঁড়িয়েছিল। অর্থাৎ, এই ধরনের অবস্থানের সাথে, উপাদান স্বাভাবিক প্রবাহ থেকে বেরিয়ে যায় না।

বর্তমান অবস্থান থেকে অফসেটগুলি বৈশিষ্ট্য দ্বারা নির্দিষ্ট করা হয় top, right, bottom এবং left।

উদাহরণ

প্রথমে, আসুন শুধু দুটি ব্লক তৈরি করি কোন অবস্থান ছাড়াই:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

উদাহরণ

এখন প্রথম ব্লকটিতে relative যোগ করা যাক। এটি এখনও কিছু পরিবর্তন করবে না, যেহেতু আমরা ব্লক অফসেট নির্দিষ্ট করিনি:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

উদাহরণ

এখন আমাদের ব্লকটিকে 30px দ্বারা উপরে সরানো যাক, এটিকে top বৈশিষ্ট্য নির্দিষ্ট করে। এ ক্ষেত্রে অন্যান্য সমস্ত উপাদান আচরণ করবে যেন আমাদের ব্লকটি সেই জায়গায় রয়ে গেছে যেখানে এটি最初থেকে ছিল:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

উদাহরণ

আসুন আমাদের ব্লকটিকে 40px দ্বারা বাম দিকেও সরাই, এটিকে left বৈশিষ্ট্য নির্দিষ্ট করে:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

উদাহরণ

top, right, বৈশিষ্ট্যগুলির নেতিবাচক মান bottom এবং left বিপরীত দিকে স্থানান্তরিত করে। উদাহরণস্বরূপ, একটি ইতিবাচক মান top নীচের দিকে স্থানান্তরিত করে, এবং একটি নেতিবাচক - উপরের দিকে।

আসুন আমাদের দ্বিতীয় ব্লকটিকে 40px দ্বারা উপরে সরাই, এটিকে top বৈশিষ্ট্যের একটি নেতিবাচক মান নির্দিষ্ট করে:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

ব্যবহারিক কাজ

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}