शैली के बीच अंतर = "स्थिति: निरपेक्ष" और शैली = "स्थिति: सापेक्ष"

103

किसी भी एक मुझे के बीच अंतर बता सकते हैं style = "position:absolute"और style = "position:relative" वे किस तरह मामले में भिन्न होते हैं मैं में जोड़ने div/ span/ inputतत्व?

मैं absoluteअभी उपयोग कर रहा हूं , लेकिन मैं इसका भी पता लगाना चाहता हूं relative। यह स्थिति कैसे बदलेगी?

css css-position

— वरुण
स्रोत

1

CSS 2.1 में 'स्थिति' गुण ।

— जोश ली

@rolflm, क्या यह संपादित 3 साल पुराने प्रश्न पर वास्तव में आवश्यक था? मैंने इसे "बहुत मामूली" कहा होगा।

— श्री लिस्टर

3

@MrLister यह एक 'सुझाए गए संपादन' समीक्षा कतार में आया .... मैंने उम्र पर ध्यान नहीं दिया। लेकिन, अगर यह 60 सेकंड का पुराना सवाल होता तो क्या इससे कोई फर्क पड़ता?

— रॉवेल्ल

@ वास्तव में नहीं; मैंने अभी भी "बहुत मामूली" वोट दिया होगा।

— श्री लिस्टर

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>

... तब innerdiv को div के शीर्ष से outer20px, और उसी के बाएँ किनारे से 20px स्थित किया जाएगा, क्योंकि outerdiv को 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>

... तो Span2 5px द्वारा Span1 के दाईं ओर ओवरलैप करेगा। Span1 और Span3 ठीक उसी स्थान पर बैठेंगे, जैसा उन्होंने पहले उदाहरण में किया था, Span2 के दाईं ओर और Span3 के बाईं ओर के बीच 5px का अंतर छोड़ दिया।

आशा है कि चीजों को थोड़ा स्पष्ट करता है।

— AgentConundrum
स्रोत

39

रिलेटिव पोजिशनिंग: व्यूपोर्ट कोऑर्डिनेट एक्सिस से लोकेशन ऑफसेट पर एलिमेंट अपना कोऑर्डिनेट एक्सिस बनाता है। यह दस्तावेज़ प्रवाह का हिस्सा है लेकिन स्थानांतरित कर दिया गया है।

पूर्ण स्थिति: एक तत्व अपने मूल तत्वों के बीच निकटतम उपलब्ध समन्वय अक्षों की खोज करता है। तत्व तो इस समन्वय अक्ष से ऑफसेट निर्दिष्ट करके तैनात किया गया है। इसे दस्तावेज़ सामान्य प्रवाह से हटा दिया जाता है।

स्रोत

— Premraj
स्रोत

15

आप निश्चित रूप से इस स्थिति लेख को 'ए सूची से अलग' से देखना चाहेंगे । सीएसएस पोजिशनिंग को ध्वस्त करने में मदद की (जो इस लेख से पहले मेरे लिए बहुत बुरा लग रहा था)।

— jbrennan
स्रोत

8

CSS पोजिशनिंग के साथ, आप एक ऐसा तत्व रख सकते हैं, जहाँ आप इसे अपने पेज पर चाहते हैं।

जब आप CSS पोजिशनिंग का उपयोग करने जा रहे हैं, तो आपको सबसे पहले ब्राउजर को बताने के लिए CSS प्रॉपर्टी पोजिशन का उपयोग करना होगा यदि आप निरपेक्ष या सापेक्ष पोजिशनिंग का उपयोग करने जा रहे हैं।

दोनों पोजिशन में अलग-अलग फीचर्स हैं। CSS में एक बार जब आप स्थिति सेट कर लेते हैं तो आप शीर्ष, दाएँ, नीचे, बाएँ विशेषताओं का उपयोग करने में सक्षम हो सकते हैं।

पूर्ण स्थिति

एक पूर्ण स्थिति तत्व पहले मूल तत्व के सापेक्ष स्थित होता है जिसमें स्थैतिक के अलावा कोई अन्य स्थिति होती है।

तुलनात्मक स्थिति

एक रिश्तेदार तैनात तत्व अपनी सामान्य स्थिति के सापेक्ष तैनात है।

किसी तत्व को अपेक्षाकृत स्थिति में लाने के लिए, संपत्ति की स्थिति सापेक्ष के रूप में निर्धारित की जाती है। पूर्ण और सापेक्ष स्थिति के बीच अंतर यह है कि स्थिति की गणना कैसे की जा रही है।

अधिक: पद सापेक्ष बनाम निरपेक्ष

— 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;

^ विंडो के तत्व शीर्ष बाईं ओर स्थित है।

सापेक्ष स्थान उस तत्व के सापेक्ष होता है जहां तत्व रखा गया है:

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

^ तत्व को 1px नीचे रखता है और जहाँ इसे मूल रूप से बैठा है, उसके बाएँ से 1px :)

— डेमियन राइट
स्रोत

3

सापेक्ष:

एक तत्व के साथ position: relative;अपनी सामान्य स्थिति के सापेक्ष तैनात किया जाता है।
यदि आप किसी रिश्तेदार तत्व पर कोई पोजिशनिंग विशेषता (ऊपर, बाएं, नीचे या दाएं) नहीं जोड़ते हैं तो इसका स्थिति पर कोई प्रभाव नहीं पड़ेगा। यह बिल्कुल एक position: staticतत्व के रूप में व्यवहार करेगा ।
लेकिन अगर आप कुछ अन्य पोजिशनिंग विशेषता जोड़ते हैं, तो कहें: शीर्ष: 10 पीएक्स ;, यह अपनी स्थिति को 10 पिक्सेल नीचे स्थानांतरित कर देगा जहां से यह सामान्य रूप से होगा।
इस प्रकार की स्थिति वाला एक तत्व अन्य तत्वों से प्रभावित हो जाता है और यह स्वयं भी दूसरों को प्रभावित करता है।

निरपेक्ष:

एक तत्व position: absolute;आपको किसी भी तत्व को ठीक उसी स्थान पर रखने की अनुमति देता है जहां आप इसे चाहते हैं। आप पोज़िशनिंग विशेषताओं का उपयोग शीर्ष, बाएँ, नीचे करते हैं। और स्थान निर्धारित करने का अधिकार।
इसे निकटतम गैर-स्थैतिक पूर्वज के सापेक्ष रखा गया है। यदि ऐसा कोई कंटेनर नहीं है, तो इसे पृष्ठ के सापेक्ष रखा जाता है।
यह पृष्ठ पर तत्वों के सामान्य प्रवाह से हटा दिया जाता है।
इस प्रकार की स्थिति वाला एक तत्व अन्य तत्वों से प्रभावित नहीं होता है और यह अन्य तत्वों के प्रवाह को भी प्रभावित नहीं करता है।

बेहतर स्पष्टता के लिए यह स्व-व्याख्यात्मक उदाहरण देखें। 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;
 }

— इमरान खान
स्रोत