শৈলী = "অবস্থান: পরম" এবং শৈলী = "অবস্থান: আপেক্ষিক" এর মধ্যে পার্থক্য

103

আমি / / উপাদানগুলিতে যুক্ত করার ক্ষেত্রে কেউ কীভাবে style = "position:absolute"এবং তার মধ্যে পার্থক্য বলতে পারে ?style = "position:relative"divspaninput

আমি absoluteএখনই ব্যবহার করছি , তবে আমি relativeপাশাপাশি অন্বেষণ করতে চাই । কীভাবে এটি অবস্থান পরিবর্তন করবে?

css css-position

— বরুণ
সূত্র

1

সিএসএস ২.১- এ 'অবস্থান' সম্পত্তি ।

— জোশ লি

@rolfl এইচএম, 3 বছরের পুরানো প্রশ্নে এই সম্পাদনাটি কি সত্যিই প্রয়োজনীয় ছিল? আমি এটিকে "অতি নাবালক" বলতাম।

— মিস্টার লিস্টার

3

@ মিঃলিস্টার এটি একটি 'প্রস্তাবিত সম্পাদনা' পর্যালোচনা সারিতে উঠে এসেছে .... আমি বয়সটি লক্ষ্য করিনি। তবে, এটি যদি 60-সেকেন্ডের পুরানো প্রশ্ন হত তবে এটি কোনও পার্থক্য করতে পারত?

— রলফ্ল

@rolfl সত্যিই নয়; আমি এখনও "খুব নাবালক" ভোট দিতাম।

— মিস্টার লিস্টার

178

নিখুঁত অবস্থানের অর্থ হল পৃষ্ঠা বিন্যাসের স্বাভাবিক প্রবাহের বাইরে উপাদানটি পুরোপুরি নেওয়া হয়ে থাকে। পৃষ্ঠার অন্যান্য উপাদানগুলির হিসাবে, একেবারে অবস্থানযুক্ত উপাদানটি কেবল উপস্থিত নেই। তারপরে উপাদানটি পৃথকভাবে আলাদাভাবে আঁকতে হবে, left, right, top and bottomবৈশিষ্ট্যগুলি ব্যবহার করে আপনি যে অবস্থানটি নির্দিষ্ট করেছেন সে স্থানে, সমস্ত কিছুর "শীর্ষে" সাজান ।

এই বৈশিষ্ট্যগুলির সাথে আপনি যে অবস্থানটি নির্দিষ্ট করেছেন সেগুলি ব্যবহার করে উপাদানটিকে তার শেষ পূর্বপুরুষের উপাদানটির মধ্যে সেই অবস্থানে স্থাপন করা হয় static(পজিশন উপাদানগুলি স্থিতিতে ডিফল্টরূপে যখন কোনও অবস্থানের বৈশিষ্ট্য নির্দিষ্ট না করা হয়) বা নথির বডি (ব্রাউজার) ভিউপোর্ট) যদি এরকম কোনও পূর্বপুরুষ উপস্থিত না থাকে।

উদাহরণস্বরূপ, যদি আমার এই কোডটি থাকে:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... এটি <div>ব্রাউজারের ভিউপোর্টের শীর্ষ থেকে 20px এবং এর বাম প্রান্ত থেকে 20px হবে।

তবে, আমি যদি এটির মতো কিছু করি:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... তারপরে innerডিভটি ডিভের শীর্ষ outerথেকে 20px এবং একই বাম প্রান্ত থেকে 20px হবে কারণ outerডিভটি অবস্থান নেই position:staticকারণ আমরা স্পষ্টভাবে এটি ব্যবহারের জন্য সেট করেছি position:relative।

অন্যদিকে আপেক্ষিক অবস্থান নির্ধারণের মতোই অবস্থান নির্ধারণের কথা না বলার মতো, তবে left, right, top and bottomবৈশিষ্ট্যগুলি তাদের স্বাভাবিক বিন্যাসের বাইরে উপাদানটিকে "ন্যাজ" করে। পৃষ্ঠার বাকী উপাদানগুলি এখনও বিচ্ছিন্ন হয়ে পড়েছে যেন উপাদানটি তার স্বাভাবিক স্থানে রয়েছে।

উদাহরণস্বরূপ, যদি আমার এই কোডটি থাকে:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... তাহলে তিনটি <span>উপাদানই ওভারল্যাপিং ছাড়াই একে অপরের পাশে বসে থাকবে।

আমি যদি দ্বিতীয়টি <span>আপেক্ষিক অবস্থান ব্যবহারের জন্য সেট করি তবে এটির মতো:

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... তারপরে স্প্যান 2 স্প্যান 1 এর ডান দিকটি 5px দ্বারা ওভারল্যাপ করবে। স্প্যান 1 এবং স্প্যান 3 স্প্যান 2 এর ডান দিক এবং স্প্যান 3 এর বাম পাশের মধ্যে 5px ব্যবধান রেখে প্রথম উদাহরণে যেমন করেছিল ঠিক ঠিক একই জায়গায় বসবে।

আশা করি বিষয়গুলি কিছুটা স্পষ্ট করে।

— AgentConundrum
সূত্র

39

আপেক্ষিক অবস্থান: ভিউপোর্ট স্থানাঙ্ক অক্ষ থেকে অফসেটের কোনও স্থানে উপাদানটি নিজস্ব স্থানাঙ্ক অক্ষ তৈরি করে। এটি নথির প্রবাহের অংশ তবে স্থানান্তরিত।

পরম অবস্থান: একটি উপাদান তার মূল উপাদানগুলির মধ্যে নিকটতম উপলব্ধ স্থানাঙ্ক অক্ষগুলির জন্য অনুসন্ধান করে। উপাদানটি তখন এই স্থানাঙ্ক অক্ষ থেকে অফসেট নির্দিষ্ট করে অবস্থিত। এটি নথির স্বাভাবিক প্রবাহ থেকে সরানো হয়েছে।

উৎস

— Premraj
সূত্র

15

আপনি অবশ্যই 'এ তালিকা অ্যাপার্টমেন্ট' থেকে এই অবস্থান নিবন্ধটি পরীক্ষা করে দেখতে চাইবেন । সিএসএসের অবস্থান নির্মূলকরণে সহায়তা করেছে (যা এই নিবন্ধের আগে আমার কাছে উন্মাদ বলে মনে হয়েছিল)।

— jbrennan
সূত্র

8

সিএসএস পজিশনিংয়ের সাহায্যে আপনি নিজের পৃষ্ঠায় যেখানে চান সেখানে একটি উপাদান ঠিক রাখতে পারেন।

আপনি যখন সিএসএস পজিশনিং ব্যবহার করতে যাচ্ছেন, আপনি প্রথমে সিএসএস সম্পত্তি অবস্থান ব্যবহার করা উচিত ব্রাউজারকে বলার জন্য যে আপনি নিখুঁত বা আপেক্ষিক অবস্থান ব্যবহার করছেন।

উভয় অবস্থানের আলাদা আলাদা বৈশিষ্ট্য রয়েছে। সিএসএসে একবার আপনি অবস্থান নির্ধারণ করলে আপনি শীর্ষ, ডান, নীচে, বাম বৈশিষ্ট্যগুলি ব্যবহার করতে পারবেন able

পরম অবস্থান

স্থায়ী ব্যতীত অন্য অবস্থানের সাথে প্রথম প্যারেন্ট উপাদানগুলির সাথে তুলনামূলক একটি পরম অবস্থানের উপাদান স্থাপন করা হয়।

আপেক্ষিক অবস্থান

একটি আপেক্ষিক অবস্থানযুক্ত উপাদানটি তার স্বাভাবিক অবস্থানের তুলনায় অবস্থান করে।

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

আরও: পোস্টের রিলেটিভ বনাম পরম

— GowriShankar
সূত্র

6

ঠিক আছে, খুব সুস্পষ্ট উত্তর এখানে ... মূলত আপেক্ষিক অবস্থান পূর্ববর্তী উপাদান বা উইন্ডো আপেক্ষিক, যখন পরম যদি না তা একটি পিতা বা মাতা যদি তুমি শীর্ষ ব্যবহার করে এবং বাম অন্যান্য উপাদানের যত্ন সম্পর্কে না ...

পার্থক্যগুলি দেখানোর জন্য আমি আপনার জন্য তৈরি উদাহরণটি দেখুন ...

এছাড়াও আপনি এটি কার্যকরভাবে দেখতে পাচ্ছেন, আমি আপনার জন্য তৈরি করা সিএসএস ব্যবহার করে, আপনি দেখতে পারেন যে নিরঙ্কুশ এবং আপেক্ষিক অবস্থানগুলি আচরণ করে:

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

স্নিপেট প্রসারিত করুন

— আলিরেজা
সূত্র

4

নিরঙ্কুশ অবস্থানটি প্রদর্শনটির কো-অর্ডিনেটের উপর ভিত্তি করে:

position:absolute;
top:0px;
left:0px;

the উইন্ডোর উপরের বাম উপাদানটি রাখে।

উপাদানটি যেখানে স্থাপন করা হয়েছে তার তুলনায় আপেক্ষিক অবস্থান:

position:relative;
top:1px;
left:1px;

the মূলত যেখানে বসেছে তার বাম দিক থেকে উপাদানটিকে 1px নীচে এবং 1px রাখে :)

— ডেমিয়েন-রাইট
সূত্র

3

আপেক্ষিক:

এর সাথে একটি উপাদান position: relative;তার স্বাভাবিক অবস্থানের তুলনায় স্থির থাকে।
আপনি যদি কোনও আপেক্ষিক উপাদানটিতে কোনও অবস্থানের বৈশিষ্ট্য (শীর্ষ, বাম, নীচে বা ডান) যোগ না করেন তবে এটির অবস্থান নির্ধারণের ক্ষেত্রে তার কোনও প্রভাব পড়বে না। এটি একটি position: staticউপাদান হিসাবে ঠিক আচরণ করবে ।
তবে আপনি যদি আরও কিছু অবস্থান নির্ধারণের বৈশিষ্ট্য যুক্ত করেন, বলুন: শীর্ষ: 10px ;, এটি তার অবস্থানটি 10 পিক্সেলটি নীচে স্থানান্তর করবে যেখানে এটি সাধারণত থাকবে।
এই ধরণের অবস্থান সহ একটি উপাদান অন্যান্য উপাদান দ্বারা প্রভাবিত হয় এবং এটি নিজেও অন্যকে প্রভাবিত করে।

চূড়ান্ত:

একটি উপাদান সহ position: absolute;আপনাকে যে কোনও উপাদানটি যেখানে ইচ্ছা ঠিক ঠিক রাখতে দেয়। আপনি উপরে, বাম, নীচে অবস্থানের বৈশিষ্ট্যগুলি ব্যবহার করুন। এবং অবস্থান সেট করতে ডানদিকে।
এটি নিকটতম অ স্থিত পূর্বপুরুষের তুলনায় স্থাপন করা হয়েছে। যদি এই ধরণের কোনও ধারক না থাকে তবে এটি পৃষ্ঠাটির সাথে সম্পর্কিত is
এটি পৃষ্ঠায় উপাদানগুলির স্বাভাবিক প্রবাহ থেকে সরানো হবে।
এই ধরণের অবস্থান সহ একটি উপাদান অন্যান্য উপাদান দ্বারা প্রভাবিত হয় না এবং এটি অন্যান্য উপাদানগুলির প্রবাহকেও প্রভাবিত করে না।

আরও স্বচ্ছতার জন্য এই স্ব-ব্যাখ্যামূলক উদাহরণটি দেখুন। https://codepen.io/nyctophiliac/pen/BJMqjX

— প্রাণ তিওয়ারি
সূত্র

0

নিখুঁত বাধ্যতামূলক স্থানে (ডিভ, স্প্যান ইত্যাদি) নিখরচায় স্থানে রাখে (সাধারণত পিক্সেলগুলিতে নির্ধারিত হয়) এবং আপেক্ষিক এটিকে নির্দিষ্ট পরিমাণে যেখানে এটির অবস্থান সাধারণত সেখানে রাখা হবে। উদাহরণ স্বরূপ:

অবস্থান: আপেক্ষিক; বাকি আছে: -20px;

পাঠ্যের বাম দিকটি যদি পর্দার বাম প্রান্তে 20px এর মধ্যে থাকে তবে অদৃশ্য হয়ে যেতে পারে।

— চার্লস জিংক
সূত্র

0

position: absolute যে কোনও জায়গায় স্থাপন করা যেতে পারে এবং সেখানে 0,0 হিসাবে থাকতে পারে।

position: relative অবস্থান থেকে এটি অফসেট সহ স্থাপন করা হয় এটি মূলত ব্রাউজারে স্থাপন করা হয়।

— ভিল ইগনোবল
সূত্র

0

অবস্থান: পিতামাতার উপাদান হিসাবে আপেক্ষিক আচরণ : আপেক্ষিক অবস্থানের সন্তানের নিখুঁত আচরণ। আপনি নীচের উদাহরণ দেখতে পারেন

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— ইমরান খান
সূত্র