CSS में, स्थैतिक (डिफ़ॉल्ट) स्थिति और सापेक्ष स्थिति के बीच अंतर क्या है?
स्थिर और सापेक्ष स्थिति के बीच अंतर
जवाबों:
स्टेटिक पोजिशनिंग तत्वों के लिए डिफ़ॉल्ट पोजिशनिंग मॉडल है। उन्हें उस पृष्ठ में प्रदर्शित किया जाता है जहाँ उन्होंने सामान्य HTML प्रवाह के भाग के रूप में प्रस्तुत किया था। स्थिर तैनात तत्वों का पालन नहीं करते left, top, rightऔर bottomनियम:
सापेक्ष स्थिति आपको एक विशिष्ट ऑफसेट ( left, topआदि) को निर्दिष्ट करने की अनुमति देती है जो HTML प्रवाह में तत्व की सामान्य स्थिति के सापेक्ष है। इसलिए अगर मेरे पास एक टेक्स्टबॉक्स है, तो मैं टेक्स्टबॉक्स divपर सापेक्ष स्थिति को लागू कर सकता हूं, ताकि यह उस विशिष्ट स्थान पर प्रदर्शित हो सके, जहां इसे सामान्य रूप से रखा जाएगा div:
संपूर्ण स्थिति भी है - जिससे आप संपूर्ण दस्तावेज़ के सापेक्ष तत्व का सटीक स्थान निर्दिष्ट करते हैं, या अगले अपेक्षाकृत स्थित तत्व को आगे तत्व ट्री :
और जब position: relativeपदानुक्रम में मूल तत्व पर लागू किया जाता है:
ध्यान दें कि कैसे हमारे बिल्कुल स्थिति तत्व अपेक्षाकृत तैनात तत्व से बंधे हैं।
और अंत में तय हो गया है। फिक्स्ड पोजिशनिंग व्यूपोर्ट में एक विशिष्ट स्थिति के लिए एक तत्व को प्रतिबंधित करता है, जो स्क्रॉल के दौरान जगह में रहता है:
आप उस व्यवहार का भी अवलोकन कर सकते हैं, जो निश्चित स्थान पर तैनात तत्वों को स्क्रॉल करने का कारण नहीं बनता है क्योंकि उन्हें व्यूपोर्ट द्वारा बाध्य नहीं माना जाता है:
जबकि पूरी तरह से तैनात तत्व अभी भी व्यूपोर्ट से बंधे हैं और स्क्रॉल करने का कारण बनेंगे:
.. बेशक आपके मूल तत्व overflow: ?स्क्रॉल के व्यवहार को निर्धारित करने के लिए उपयोग करता है (यदि कोई हो)।
पूर्ण स्थिति और निश्चित स्थिति के साथ, तत्वों को HTML प्रवाह से बाहर ले जाया जाता है।
अच्छा उत्तर, लेकिन (सापेक्ष स्थिति के लिए) तत्व की सामान्य स्थिति के आधार पर ऑफसेट नहीं है?
—
बज़टाउन
मैं Baztoune से सहमत हूं, अपेक्षाकृत तैनात तत्वों के लिए यह परिभाषा भ्रामक है। ए
—
रेयान विलियम्स
staticऔर relativeतत्व एक समान हैं, बाद वाले को छोड़कर आप इसे अपनी मूल स्थिति के सापेक्ष बदल सकते हैं , न कि युक्त तत्व को - जहां वह absoluteआता है। इसके अलावा, किसी भी तत्व की तरह जो आपके द्वारा उपयोग किए जाने वाले मूल्य का उपयोग करके तैनात किया staticजा सकता है z-index।
मैंने इस उत्तर को अधिक सटीक रूप से सापेक्ष स्थिति को परिभाषित करने के लिए पुन: काम किया है और इसमें विभिन्न प्रकार की स्थितियों को प्रदर्शित करने के लिए चित्र शामिल किए हैं।
—
मैथ्यू एबट
मुझे आश्चर्य है कि सीएसएस अभी भी डिफ़ॉल्ट रूप से
—
cram2208
position: static;इसे बदलने के बजाय क्यों लागू करेगा position: relative;? यदि कोई आइटम को अन्य स्थिति से अलग नहीं करना चाहता है top: 0;और left: 0;फिर उसे ठीक नहीं करता है? क्या position: static;सीएसएस के हिस्से के रूप में अभी भी एक आवश्यक कारण है?
@ cram2208 क्योंकि रिश्तेदार बनाता है बच्चों को पूर्ण स्थिति में तैनात नोड्स उनके सापेक्ष तैनात किया जाता है, स्थैतिक पूरी तरह से तैनात बच्चों को उनकी स्थिति की अनदेखी करने और निकटतम रिश्तेदार तैनात तत्व के सापेक्ष तैनात करने की अनुमति देता है। इसकी एक महत्वपूर्ण अवधारणा है
—
फेल्पे सिप
आप यहां एक साधारण अवलोकन देख सकते हैं: W3School
इसके अलावा, यदि मैं सही ढंग से याद करता हूं, तो किसी तत्व को रिश्तेदार घोषित करते समय, यह डिफ़ॉल्ट रूप से उसी स्थान पर रहेगा, जैसा कि इसे अन्यथा होना चाहिए, लेकिन आप इस तत्व के अंदर बिल्कुल स्थिति तत्वों की क्षमता हासिल कर लेते हैं, जो मुझे बहुत उपयोगी लगी है। भूतकाल में।
w3schools ... मैं इसे कम नहीं करूंगा, लेकिन आपको शर्म के साथ जीना होगा।
—
माइल ग्रे
इस बीच, 2017 में, W3Schools उतना बुरा नहीं है जितना कि यह हुआ करता था (यह अभी भी सही नहीं है, लेकिन उन्होंने समुदाय को गंभीरता से लिया और वास्तव में सुधार हुआ)।
—
प्रिदु नीमरे
इस बीच, 2018 में, W3Schools अभी भी उतने बुरे नहीं हैं जितना कि यह हुआ करते थे, लेकिन उनके लिए यह बुरा लगता है कि उनकी प्रतिष्ठा आज भी ऐसी है कि अन्य देवों के लिए उपरोक्त पहली टिप्पणी का उल्लेख करना, अभी भी एक क्लासिक चकली है ... वापस मेरे दिन में ... W3School .... पहली छापें हे ...
—
redfox05
"क्यों सीएसएस अभी भी स्थिति को लागू करेगा के जवाब में: स्थिर;" एक scenerio में, स्थिति का उपयोग करते हुए: माता-पिता और स्थिति के लिए सापेक्ष: बच्चे के लिए निरपेक्ष बच्चे की स्केलिंग चौड़ाई को सीमित करता है। एक क्षैतिज मेनू प्रणाली में, जहां आप लिंक का 'कॉलम' रख सकते थे, 'चौड़ाई: ऑटो' का उपयोग करके रिश्तेदार माता-पिता के साथ काम नहीं करते। इस स्थिति में, इसे 'स्टेटिक' में बदलने से चौड़ाई सामग्री के भीतर चर पर निर्भर हो जाएगी।
मैंने यह सोचकर कुछ घंटे बिताए कि मैं अपने कंटेनर को उसके भीतर सामग्री की मात्रा के आधार पर समायोजित करने के लिए क्यों नहीं मिला। उम्मीद है की यह मदद करेगा!
यह जवाब है! प्रत्येक व्यक्ति केवल सापेक्ष स्थिति के लिए पेशेवरों को बताता है, इस तरह से एक प्रश्न में बिंदु को गायब करता है: क्या अंतर है।
—
बार्टिस ऑरोन
पोजिशन रिलेटिव आपको पोजिशनिंग के लिए टॉप / बॉटम / लेफ्ट / राइट का इस्तेमाल करने देता है। जब तक आप मार्जिन मापदंडों का उपयोग नहीं करते तब तक स्टेटिक आपको ऐसा नहीं करने देगा। टॉप और मार्जिन-टॉप के बीच अंतर है।
डिफ़ॉल्ट होने पर आपको स्थिर का उपयोग करने की आवश्यकता नहीं होगी
सापेक्ष स्थिति सामान्य प्रवाह के सापेक्ष होती है। उस तत्व की आपेक्षिक स्थिति (ऑफसेट के साथ) उस स्थिति के सापेक्ष होती है, जहां वह तत्व सामान्य रूप से स्थानांतरित नहीं होता।
मैथ्यू एबट का जवाब बहुत अच्छा है।
निरपेक्ष और सापेक्ष स्थिति में आइटम का पालन करना top, left, rightऔर bottomआदेश (ऑफसेट) जहां स्थिर तैनात आइटम नहीं है।
अपेक्षाकृत तैनात आइटम ऑफ़सेट ले जाते हैं जहाँ से वे सामान्यतया html में होते हैं।
निरपेक्ष तैनात आइटम दस्तावेज़ से या अगले अपेक्षाकृत उप-तत्व को DOM ट्री तक ले जाते हैं।
स्टेटिक और रिलेटिव पोजिशन एट्रीब्यूट हैं। कई उपयोगों के लिए यह संबंधित है। एक के लिए नहीं। लेकिन ध्यान रखें कि स्थिर और सापेक्ष Html के सामान्य दस्तावेज़ प्रवाह को नुकसान नहीं पहुंचाते हैं। स्थिर वह डिफ़ॉल्ट स्थिति है जब आप किसी भी तत्व को Html में लिखते हैं। यदि किसी तत्व की सापेक्ष स्थिति है, तो वह तत्व उसके मूल स्थान के सापेक्ष तैनात किया जा सकता है। जब आप तत्व को छोटे स्थानों से समायोजित करना चाहते हैं, तो सापेक्ष स्थिति का उपयोग करें ताकि तत्व तत्व के सापेक्ष होने पर आपको मार्जिन, पैडिंग आदि जोड़ने की आवश्यकता न हो और इसमें एक बाल तत्व हो। यहाँ हम इसके अभिभावकों के लिए अपेक्षाकृत माप कर सकते हैं। यदि आप बच्चे को चौड़ाई 10% जोड़ते हैं, तो इसका मतलब है (चौड़ाई + गद्दी) x10%। लेकिन आप सापेक्ष कीवर्ड नहीं जोड़ते हैं, तो आपको चौड़ाई 10% मिलती है। उसके अलावा, रिश्तेदार का सबसे महत्वपूर्ण उपयोग है; आप किसी भी तत्व को उसके ऊपर रख सकते हैं।
position: relative, और आप कभी भी टाइप नहीं करते हैंposition: static:)