स्थिति - सीएसएस-ट्रिक्स | सीएसएस पंचांग 2025

positionसंपत्ति मदद कर सकते हैं एक तत्व के स्थान, उदाहरण के लिए हेरफेर:

.element ( position: relative; top: 20px; )

अपनी मूल स्थिति के सापेक्ष ऊपर का तत्व अब 20px तक ऊपर से नीचे की ओर झुका रहेगा। यदि हम इन गुणों को चेतन करने के लिए थे, तो हम यह देख सकते हैं कि यह हमें कितना नियंत्रण प्रदान करता है (हालाँकि यह प्रदर्शन कारणों के लिए एक अच्छा विचार नहीं है):

relativepositionसंपत्ति के लिए केवल छह मूल्यों में से एक है। यहाँ अन्य हैं:

मूल्यों

static: प्रत्येक तत्व में डिफ़ॉल्ट रूप से एक स्थिर स्थिति होती है, इसलिए तत्व सामान्य पृष्ठ प्रवाह से चिपक जाएगा। इसलिए अगर कोई लेफ्ट / राइट / टॉप / बॉटम / जेड-इंडेक्स सेट है तो उस एलिमेंट पर कोई असर नहीं पड़ेगा।
relative: एक तत्व की मूल स्थिति दस्तावेज़ के प्रवाह में बनी रहती है, staticमान की तरह । लेकिन अब लेफ्ट / राइट / टॉप / बॉटम / जेड-इंडेक्स काम करेगा। स्थितीय गुण उस दिशा में मूल स्थिति से तत्व को "नग्न" करते हैं।
absolute: तत्व को दस्तावेज़ के प्रवाह से हटा दिया जाता है और अन्य तत्व ऐसा व्यवहार करेंगे जैसे कि यह वहां भी नहीं है, जबकि अन्य सभी स्थिति गुण इस पर काम करेंगे।
fixed: तत्व दस्तावेज़ के प्रवाह से बिल्कुल हटाए गए तत्वों की तरह हटा दिया जाता है। वास्तव में वे लगभग समान ही व्यवहार करते हैं, केवल निश्चित पद तत्व हमेशा दस्तावेज़ के सापेक्ष होते हैं, किसी विशेष माता-पिता के नहीं, और स्क्रॉल करके अप्रभावित रहते हैं।
sticky(प्रायोगिक): तत्व को एक relativeमान की तरह माना जाता है जब तक कि व्यूपोर्ट का स्क्रॉल स्थान एक निर्दिष्ट सीमा तक नहीं पहुंच जाता है, जिस बिंदु पर तत्व एक fixedस्थिति लेता है जहां उसे छड़ी करने के लिए कहा जाता है।
inherit: positionमान कास्केड नहीं करता है, इसलिए इसका उपयोग विशेष रूप से इसे करने के लिए किया जा सकता है, और inheritइसके माता-पिता से स्थिति मूल्य।

पूर्ण

यदि किसी बाल तत्व का absoluteमूल्य है तो अभिभावक तत्व ऐसा व्यवहार करेगा जैसे कि बच्चा बिल्कुल नहीं है:

.element ( position: absolute; )

और जब हम अन्य मूल्यों को निर्धारित करने का प्रयास करते हैं left, जैसे कि , bottomऔर rightहम पाएंगे कि बाल तत्व अपने माता-पिता के आयामों का जवाब नहीं दे रहा है, लेकिन दस्तावेज़:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

बच्चे के तत्व को उसके मूल तत्व से बिल्कुल अलग करने के लिए हमें इसे मूल तत्व पर ही सेट करना होगा:

.parent ( position: relative; )

अब जैसे गुण left, right, bottomऔर topमाता पिता के तत्व का उल्लेख होगा, इसलिए अगर हम बच्चे तत्व को पारदर्शी बनाने के हम इसे माता-पिता के तल पर सही बैठे देख सकते हैं कि:

फिक्स्ड

fixedमूल्य के समान है absoluteलेकिन इस मूल्य स्क्रॉल से अप्रभावित है, के रूप में यह आप एक तत्व कहीं भी दस्तावेज़ के सापेक्ष स्थिति कर सकते हैं। नीचे दिए गए डेमो में बच्चे के तत्व को देखें और कैसे, एक बार जब आप स्क्रॉल करते हैं, तो यह पेज के निचले हिस्से पर चिपका रहता है:

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४	२	।	१२	3.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	३	।

चिपचिपा

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

वह क्या करता है? ठीक है, यह आपको दस्तावेज़ पर किसी भी चीज़ के सापेक्ष एक तत्व की स्थिति की अनुमति देता है और फिर, एक बार जब किसी उपयोगकर्ता ने व्यूपोर्ट में एक निश्चित बिंदु पर स्क्रॉल किया है, तो उस स्थान पर तत्व की स्थिति को ठीक करें ताकि यह तत्व के साथ एक तत्व की तरह लगातार बना रहे। fixedमान।

निम्नलिखित उदाहरण लें:

.element ( position: sticky; top: 50px; )

जब तक व्यूपोर्ट का स्क्रॉल स्थान उस बिंदु तक नहीं पहुंच जाता, जहां तत्व 50pxव्यूपोर्ट के ऊपर से होगा । उस बिंदु पर, तत्व चिपचिपा हो जाता है और स्क्रीन के शीर्ष fixedस्थान पर रहता है 50px।

निम्नलिखित डेमो उस बिंदु को दिखाता है, जहां शीर्ष नेविगेशन डिफ़ॉल्ट relativeस्थिति है और दूसरा नेविगेशन stickyव्यूपोर्ट के शीर्ष पर सेट है । कृपया ध्यान दें कि इस लेखन के समय डेमो केवल क्रोम, सफारी और ओपेरा में काम करेगा।