स्थिति सापेक्ष बनाम निरपेक्ष?

155

position: relativeऔर position: absoluteCSS में क्या अंतर है ? और आपको कब उपयोग करना चाहिए?

css

— अरविंद एस सालुंके
स्रोत

2

मैंने यहाँ कुछ विस्तृत विवरण दिया है कि वे कैसे काम करते हैं

— श्री एलियन

स्थिति पर w3schools ट्यूटोरियल इसे अच्छी तरह से समझाता है।

— gnsb

1

एक अपेक्षाकृत तैनात तत्व अपनी सामान्य स्थिति के सापेक्ष तैनात है। पूरी तरह से तैनात तत्व पहले मूल कंटेनर के सापेक्ष है जिसमें पूर्ण या सापेक्ष स्थिति है। यहाँ एक बढ़िया लेख है kolosek.com/css-position-relative-vs-position-absolute जो सापेक्ष और निरपेक्ष पदों के बारे में विस्तार से बता रहा है।

— नेशा ज़ोरिक

160

पूर्ण सीएसएस स्थिति

position: absolute;

पूर्ण स्थिति समझना सबसे आसान है। आप सीएसएस positionसंपत्ति के साथ शुरू करते हैं:

position: absolute;

यह ब्राउज़र को बताता है कि जो कुछ भी पोस्ट होने वाला है उसे दस्तावेज़ के सामान्य प्रवाह से हटा दिया जाना चाहिए और इसे पृष्ठ पर सटीक स्थान पर रखा जाएगा। यह प्रभावित नहीं करेगा कि HTML में या उसके बाद के तत्व वेब पेज पर कैसे पोस्ट किए जाते हैं, हालांकि यह माता-पिता की स्थिति के अधीन होगा जब तक कि आप इसे ओवरराइड नहीं करते।

यदि आप दस्तावेज़ विंडो के शीर्ष से एक तत्व 10 पिक्सेल की स्थिति बनाना चाहते हैं, तो आप वहां स्थिति के साथ topऑफसेट का उपयोग करेंगे :positionabsolute

position: absolute;
top: 10px;

यह तत्व तब 10pxपृष्ठ के ऊपर से हमेशा प्रदर्शित होगा , भले ही कोई भी तत्व (नेत्रहीन) उस सामग्री से गुजरता हो, जिसके नीचे या ऊपर।

चार स्थिति गुण हैं:

top
right
bottom
left

उनका उपयोग करने के लिए, आपको उन्हें ऑफसेट गुणों के रूप में सोचने की आवश्यकता है। दूसरे शब्दों में, एक तत्व तैनात right: 2pxसही नहीं है 2px। यह दाईं ओर खिड़की के दाईं ओर से ऑफसेट है (या इसकी स्थिति माता-पिता को ओवरराइड करके) 2px। अन्य तीनों के लिए भी यही सच है।

सापेक्ष स्थिति

position: relative;

रिलेटिव पोजिशनिंग में पोजिशनिंग के समान ही चार पोजिशनिंग प्रॉपर्टीज का उपयोग किया जाता है absolute। लेकिन ब्राउज़र दृश्य पोर्ट पर तत्व की स्थिति को आधार बनाने के बजाय, यह शुरू होता है जहां से तत्व तब होगा जब यह अभी भी सामान्य प्रवाह में था ।

उदाहरण के लिए, यदि आपके वेब पेज पर तीन पैराग्राफ हैं, और तीसरे में एक position: relativeशैली रखी गई है, तो इसकी स्थिति इसके वर्तमान स्थान के आधार पर ऑफसेट की जाएगी - व्यू पोर्ट के मूल पक्षों से नहीं।

परिच्छेद 1।

अनुच्छेद २।

अनुच्छेद ३।

उपरोक्त उदाहरण में, तीसरा पैरा 3emकंटेनर तत्व के बाईं ओर से स्थित किया जाएगा, लेकिन अभी भी पहले दो पैराग्राफ से नीचे होगा। यह दस्तावेज़ के सामान्य प्रवाह में बना रहेगा, और बस थोड़ा सा ऑफसेट होगा। यदि आपने इसे बदल दिया है position: absolute;, तो इसके पीछे कुछ भी प्रदर्शित होगा, क्योंकि यह अब दस्तावेज़ के सामान्य प्रवाह में नहीं होगा।

टिप्पणियाँ:

widthकिसी तत्व का डिफ़ॉल्ट जो बिल्कुल तैनात है, उसके भीतर की सामग्री की चौड़ाई है, एक तत्व के विपरीत जो अपेक्षाकृत स्थित है जहां वह डिफ़ॉल्ट widthहै 100%वह उस स्थान का है जो इसे भर सकता है।
आपके पास ऐसे तत्व हो सकते हैं जो बिल्कुल तैनात तत्वों के साथ ओवरलैप करते हैं, जबकि आप अपेक्षाकृत तैनात तत्वों (मूल रूप से नकारात्मक मार्जिन / स्थिति के उपयोग के बिना) के साथ ऐसा नहीं कर सकते हैं

बहुत से खींचा गया: यह संसाधन

— माइकल ज़ापोरोज़ेत्स
स्रोत

159

पूर्ण स्थिति के बारे में बयान भ्रामक हैं। पूर्ण स्थिति वाले तत्वों को पहले माता-पिता के सापेक्ष या पूर्ण स्थिति के साथ रखा जाता है। यह सबसे बाहरी तत्व (<html>) हो सकता है या नहीं भी हो सकता है। यह सब इस बात पर निर्भर करता है कि किन वस्तुओं में निरपेक्ष स्थिति है। एक और बड़ा अंतर यह है कि निरपेक्ष तैनात तत्व सामान्य दस्तावेज़ प्रवाह से हटा दिए जाते हैं और रिश्तेदार तैनात आइटम नहीं होते हैं। इसलिए यदि आपके पास एक दूसरे के ऊपर तीन <div> s हैं और आप मध्य को पूर्ण स्थिति में सेट करते हैं, तो ऊपर और नीचे <div> का एक साथ पतन होगा।

— d512

11

@ user1334007 आप बहुत सही हैं, मेरी पोस्ट को संपादित करने के लिए स्वतंत्र महसूस करें क्योंकि मैं वर्तमान में खुद ऐसा करने के लिए बहुत त्रस्त हूं।

— माइकल ज़ापोरोज़ेत्स

@ user1334007 हाँ तो मैं समीक्षा या जो कुछ भी स्वीकार नहीं कर सकता, लेकिन मैं आज रात को आपके द्वारा उठाए गए कुछ बिंदुओं के लिए कुछ संपादन खुद करूंगा। मैं चीजों को बहुत ही कैजुअल तरीके से समझाता हूं क्योंकि यह चीजों को 'टेक्स्टबुक' होने से बचाए रखता है लेकिन मैं जिस कंटेंट से सहमत हूं वह उतना ही सटीक होना चाहिए।

— माइकल Zaporozhets

2

यह उत्तर उस स्थिति को स्पष्ट करने में विफल रहता है: निरपेक्ष; निकटतम पद पूर्वज के सापेक्ष तैनात किया गया है

— Sava Jcript

@AndreyMarushkevych उत्तर को संपादित करने के लिए स्वतंत्र महसूस करता है।

— माइकल ज़ापोरोज़ेत्स

52

दोनों "रिश्तेदार" और "पूर्ण" स्थिति वास्तव में अलग फ्रेमवर्क के साथ सापेक्ष हैं। "एब्सोल्यूट" पोजिशनिंग दूसरे की स्थिति के सापेक्ष है, एलीलिंग एलिमेंट। "सापेक्ष" स्थिति उस स्थिति के सापेक्ष है जो तत्व स्वयं स्थिति के बिना होगा।

यह आपकी आवश्यकताओं और लक्ष्यों पर निर्भर करता है जो आप उपयोग करते हैं। "सापेक्ष" स्थिति तब उपयुक्त होती है जब आप किसी तत्व को उस स्थिति से विस्थापित करना चाहते हैं जो अन्यथा तत्वों के प्रवाह में होगा, जैसे कि कुछ वर्णों को सुपरस्क्रिप्ट की स्थिति में प्रदर्शित करना। "निरपेक्ष" स्थिति एक तत्व को किसी अन्य तत्व द्वारा निर्धारित निर्देशांक की कुछ प्रणाली में रखने के लिए उपयुक्त है, उदाहरण के लिए कुछ पाठ के साथ एक छवि "ओवरप्रिंट" करने के लिए।

एक विशेष के रूप में, position: relativeएक तत्व को संदर्भ के एक फ्रेम बनाने के लिए बिना किसी विस्थापन (बस सेटिंग ) के साथ "सापेक्ष" स्थिति का उपयोग करें , ताकि आप इसके अंदर (मार्कअप में) तत्वों के लिए "पूर्ण" स्थिति का उपयोग कर सकें।

— जुक्का के। कोरपेला
स्रोत

Relative positioning is relative to the position that the element itself would have without positioning?? स्थिति के बिना तत्व डिफ़ॉल्ट रूप से "स्थिर" होगा, लेकिन सापेक्ष नहीं

— किट्टू

21

एक और ध्यान देने वाली बात यह है कि यदि आप चाहते हैं कि कोई परम तत्व मूल तत्व तक ही सीमित हो तो आपको मूल तत्व की स्थिति को सापेक्ष में स्थापित करने की आवश्यकता है। यह मूल तत्व के भीतर निहित बाल तत्व को रखेगा और यह पूरी खिड़की के लिए "सापेक्ष" नहीं होगा।

मैंने एक ब्लॉग पोस्ट लिखी है जो एक सरल उदाहरण देता है जो निम्नलिखित प्रभाव पैदा करता है:

यहां छवि विवरण दर्ज करें

यह एक हरे रंग की div है जो बिल्कुल पैरेंट येलो div के निचले हिस्से में स्थित है।

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

— ट्रॉय ग्रोसफील्ड
स्रोत

4

माता-पिता को 'स्थिर नहीं' होने की आवश्यकता है - इसलिए माता-पिता रिश्तेदार, निरपेक्ष आदि हो सकते हैं ... माता-पिता-रिश्तेदार का उपयोग करने का लाभ यह है कि यह डॉक्टर को तत्व से दूर नहीं करता है।

— फर्नांडो

19

स्थिति सापेक्ष:

यदि आप स्थिति निर्दिष्ट करते हैं: रिश्तेदार, तो आप उस तत्व के सापेक्ष तत्व को स्थानांतरित करने के लिए ऊपर या नीचे, और बाएं या दाएं का उपयोग कर सकते हैं जहां यह सामान्य रूप से दस्तावेज़ में होगा।

स्थिति निरपेक्ष:

जब आप स्थिति निर्दिष्ट करते हैं: निरपेक्ष, तत्व को दस्तावेज़ से हटा दिया जाता है और ठीक उसी स्थान पर रखा जाता है जहां आप इसे जाने के लिए कहते हैं।

यहाँ एक अच्छा ट्यूटोरियल है http://www.barelyfitz.com/screencast/html-training/css/positioning/ जो पूर्ण और सापेक्ष स्थिति के साथ दोनों स्थिति के नमूने के उपयोग के साथ है।

— सांकेतिक शब्दों में बदलनेवाला
स्रोत

12

रिश्तेदार: यह वर्तमान स्थिति के सापेक्ष है, लेकिन इसे स्थानांतरित किया जा सकता है। या A RELATIVE स्थिति तत्व ITSELF के सापेक्ष स्थित है।

निरपेक्ष: एक ABSOLUTE स्थित तत्व IT'S CLOSEST POSITIONED PARENT के सापेक्ष स्थित है। यदि कोई मौजूद है, तो यह विंडो के सापेक्ष निश्चित ..... की तरह काम करता है।

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

यहाँ, 2 माता-पिता की divस्थिति सापेक्ष होती है, इसलिए बीच divमें परिवर्तन होगा यह 2 माता-पिता के संबंध में स्थिति है div। यदि 1 माता-पिता की divस्थिति सापेक्ष होगी, तो मध्य div1 माता-पिता के संबंध में बदल जाएगा div। विवरण

— आरिफ
स्रोत

2

जवाब देना, मेरी प्रतिष्ठा के रूप में टिप्पणी करने के लिए पर्याप्त है। लेकिन इसे एक जवाब के रूप में न देखें, सिर्फ एक अतिरिक्त जानकारी के रूप में, अपने आप में, पाद लेख और स्थिति दोनों के साथ कुछ समस्याएं थीं।

पृष्ठ सेट करते समय, ताकि मेरा पाद हमेशा नीचे की ओर रहे, स्थिति निरपेक्ष के साथ, और मुख्य कंटेनर / रैपर सापेक्ष स्थिति के साथ।

मैंने तब अपनी सामग्री के साथ कुछ समस्याएँ और उसी सामग्री के अंदर एक मेनू (हेडर और पाद लेख के बीच का पृष्ठ का सफेद भाग) पाया, जब इन्हें पूर्ण करने के लिए सेट किया गया, पाद लेख अब नीचे नहीं रहता है।

पोस्टिंग है, जैसा कि आप एक जटिल विषय कहते हैं।

मेरा समाधान, वह सामग्री जो मैं अपने वेबपेज में 'पूर्ण' पॉज़िटॉन में चाहता था, और उस तरफ नहीं धकेलना चाहिए, जब उदाहरण में एक ड्रॉप डाउन मेनू को खोलना है, तो वास्तव में इसे पोस्ट के सापेक्ष देना था, और इसे मेरे ड्रॉप डाउन से 35em नीचे रखना था। मेन्यू। (35em मेरे ड्रॉपडाउन मेन्यू का आधार है, जब पूरी तरह से विस्तारित)

फिर, शीर्ष: -35em, उस सामग्री के लिए जिसे पहले साइड में धकेल दिया गया था। और फिर मार्जिन-बॉटम जोड़ें: -35em। इस तरह, सामग्री मेरे ड्रॉप डाउन मेनू के "नीचे" है, लेकिन नेत्रहीन यह मेरे ड्रॉप डाउन मेनू के साथ-साथ है! और पाद के नीचे सफेद स्थान, केवल 10em मार्जिन के साथ है, क्योंकि यह इसके साथ खेलना शुरू करने से पहले था। तो मेरा समाधान इस तरह था:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

मैं देख रहा हूं कि आपके प्रश्न का उत्तर अच्छा है, लेकिन बहुत परेशान होने के बाद मैंने इसे एक बहुत अच्छा समाधान पाया, और बेहतर तरीके से यह समझने का तरीका है कि स्थिति कैसे काम करती है .. जब मैं अपने ड्रॉप डाउन मेनू के नीचे अपना पाठ सामग्री डालता हूं, तो यह नहीं होता है ' t मेरे पाठ को किनारे की ओर धकेलें। यदि मैंने पाठ को पूर्ण स्थिति में बदल दिया, तो पाद लेख स्थान पर नहीं रहता था। जैसा कि मैं विश्वास कर सकता हूं कि यह अधिक लोगों के लिए एक मुद्दा है तो मुझे, मैं इसे यहां जोड़ता हूं। क्या वास्तव में खुशी होती है, क्या मैंने अपने ड्रॉप डाउन के नीचे, पाठ 35 सेंटीमीटर रखा है।

फिर, मैंने नेत्रहीन इसे प्रत्येक अभिभावक के ठीक बगल में रखा, सापेक्ष स्थिति के साथ, और शीर्ष: -35em ;, और शाम को नीचे विशाल स्थान, मार्जिन के साथ: -35em;

नकारात्मक मूल्यों को कई बार, बहुत अच्छी कार्यक्षमता से कम आंका जाता है, जब कोई इन पदों को बेहतर ढंग से समझता है!

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

इस सेटअप ने तय किया कि बहुत अच्छी तरह से, और 'em' का उपयोग करना याद रखें, न कि अधिक तरल / गतिशील पृष्ठ लेआउट के लिए 'px'! :)

(बेहतर समाधान हो सकता है, लेकिन यह मेरे लिए प्लेटफॉर्म, साथ ही उपकरणों को पार करता है)।

— Sunto
स्रोत

2

सापेक्ष बनाम पूर्ण:

अंतर: स्वयं के सापेक्ष, निकटतम पूर्वज के सापेक्ष।
अंतर: इसके आस-पास के अन्य तत्व इसके पुराने अस्तित्व का सम्मान करते हैं, इसके आस-पास के अन्य तत्व इसके पुराने अस्तित्व का सम्मान नहीं करते हैं।
समानता: इसके आस-पास के अन्य तत्व इसके नए अस्तित्व का सम्मान नहीं करते हैं, इसके आसपास के अन्य तत्व इसके नए अस्तित्व का सम्मान नहीं करते हैं।

— हरिस गौरी
स्रोत

1

आइए निरपेक्ष बनाम सापेक्ष के अंतर को समझाने के लिए एक परिदृश्य पर चर्चा करें।

शरीर तत्व के अंदर कहते हैं कि आपके पास एक हेडर तत्व है जिसकी ऊँचाई 95% है। इस कंटेनर के भीतर आपने एक चित्र रखा है और इसे 0.5 कहने के लिए अस्पष्टता कम कर दी है। और अब आप ऊपरी बाएँ कोने के पास एक लोगो छवि रखना चाहते हैं। मुझे उम्मीद है कि आप परिदृश्य को समझ गए होंगे। तो आपके पास एक हेडर सेक्शन में एक लाइट इमेज होगी, जिसमें निर्दिष्ट स्थान पर एक लोगो होगा।

लेकिन इसे शुरू करने से पहले, मैंने इस तरह 0 पर मार्जिन और पैडिंग सेट किया है

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

यह सुनिश्चित करता है कि कोई डिफ़ॉल्ट मार्जिन न हो और तत्वों पर पैडिंग लागू हो।

तो आप अपनी आवश्यकता को दो तरीकों से प्राप्त कर सकते हैं।

पहला रास्ता

आप लोगो का कहना है कि छवि के लिए एक वर्ग दे।
सीएसएस में आप लिखते हैं

.logo{ float:left; margin-top:40px; margin-left:40px; }
इसने लोगो को शीर्ष पर से 40px तक रखा और संलग्नक माता-पिता के बाईं ओर है जो हेडर है। छवि दिखाई देगी जैसे कि इसे वांछित के रूप में रखा गया है।

लेकिन मेरे दोस्त, यह एक खराब डिज़ाइन है क्योंकि एक ऐसी छवि को रखने के लिए जिसे आपने आवश्यकता नहीं होने पर कुछ मार्जिन देकर चारों ओर से इतनी जगह खाली कर दी है। आप सभी की जरूरत छवि को उस स्थान पर रखना है। आपने इसे मार्जिन के साथ कुशनिंग करके प्रबंधित किया। मार्जिन ने जगह ले ली और धक्का दिया कि यह एक गहरा प्रभाव है जो यह बताता है कि यह वही है जहाँ आप चाहते थे। आशा है कि आप इसे इस तरह से काम करके इस मुद्दे को समझ गए होंगे। आप वांछित स्थान पर सिर्फ एक छवि रखने के लिए आवश्यकता से अधिक स्थान ले रहे हैं।

अब एक अलग दृष्टिकोण की कोशिश करते हैं।

दूसरा तरीका

लोगो वर्ग के साथ छवि हेडर वर्ग के साथ हेडर तत्व के अंदर है। तो मूल वर्ग हेडर है और चाइल्ड क्लास पहले की तरह लोगो है।
आप हेडर वर्ग की स्थिति संपत्ति को इस तरह सापेक्ष करने के लिए सेट करते हैं

.header{ position: relative; }
फिर आपने लोगो क्लास में निम्नलिखित गुण जोड़े

.logo{ position:absolute; top:40px; left:40px }

तुम वहाँ जाओ। आपने छवि को बिल्कुल उसी स्थान पर रखा है। पहले दृष्टिकोण और दूसरे दृष्टिकोण के बीच नग्न आंखों से स्थिति में कोई स्पष्ट अंतर नहीं होगा। लेकिन यदि आप छवि तत्व का निरीक्षण करते हैं, तो आप पाएंगे कि इसने कोई अतिरिक्त स्थान नहीं लिया है। यह उतनी ही जगह घेर रहा है, जितनी इसकी चौड़ाई और ऊंचाई है।

तो यह कैसे संभव है? मैं छवि के लोगो के वर्ग के लिए कहा था कि आप रखा जाएगा रिश्तेदार हैडर वर्ग के रूप में आप इस वर्ग के बच्चे हैं और है कि मैं विशेष रूप से के रूप में यह की स्थिति का उल्लेख किया रिश्तेदार । ताकि इसके शीर्ष बाएँ कोने के सापेक्ष इसका कोई भी बच्चा रखा जाए। और इस मूल तत्व के अंदर आपकी स्थिति को ठीक करने की आवश्यकता है। इसलिए आपको निरपेक्षता दी जाती है। और यह कि आपको ऊपर से थोड़ा हटकर उस स्थिति में जाना होगा जो मैं चाहता हूं कि आप चाहते हैं। इसलिए आपको मूल्य के रूप में 40px के साथ शीर्ष और बाईं संपत्ति दी जाती है। इस तरह आपको केवल अपने माता-पिता के सापेक्ष रखा जाएगा। इसलिए अगर कल मैं अपने माता-पिता को ऊपर या नीचे या कहीं भी ले जाता हूं, तो आप हमेशा अपने माता-पिता के शीर्ष बाएं कोने के शीर्ष और बाएं 40px होंगे। इसलिए आपकी स्थिति आपके माता-पिता के अंदर तय की जाती है, भले ही आपके माता-पिता की स्थिति तय हो या न हो, लेकिन भविष्य में (यह आपकी तरह निरपेक्ष नहीं है)।

इसलिए क्रमशः माता-पिता और बच्चे के लिए सापेक्ष और निरपेक्ष का उपयोग करें। दूसरी बार इसका उपयोग तब करें जब आप चाइल्ड एलिमेंट को मूल तत्व के अंदर किसी स्थान पर रखना चाहते हैं। इसे जबरदस्ती पुश करने के लिए मार्जिन जैसे फिलर्स का उपयोग न करें। माता-पिता को सापेक्ष मूल्य और वह बच्चा दें जिसे आप स्थानांतरित करना चाहते हैं, पूर्ण मूल्य। चाइल्ड क्लास को टॉप, लेफ्ट बॉटम या राईट प्रॉपर्टी निर्दिष्ट करें ताकि आप उसे कहीं भी माता-पिता के अंदर रख सकें।

धन्यवाद।

— सुमित
स्रोत

0

मार्को पेलिसियोट्टा: किसी अन्य तत्व के अंदर तत्व की स्थिति सापेक्ष या निरपेक्ष हो सकती है, जिस तत्व के अंदर है।

यदि आपको ब्राउज़र विंडो बिंदु में तत्व को देखने की आवश्यकता है, तो स्थिति का उपयोग करना सबसे अच्छा है: निश्चित

— मार्क्विन्हो पेली
स्रोत