स्थिति संबंधित - यह क्या है? विस्तृत विवरण
एचटीएमएल कोडिंग - एक लंबी, सावधानीपूर्वक प्रक्रियालेकिन काफी रचनात्मक। इस तथ्य के बावजूद कि आईटी के क्षेत्र में काम कर रहे अधिकांश लोगों के लिए, वेब पेजों का लेआउट एक उबाऊ दिनचर्या जैसा प्रतीत हो सकता है, ऐसे विशेषज्ञ जिनके पास इस तरह के व्यवसाय के लिए व्यवसाय है, न केवल कार्य को गुणात्मक रूप से निष्पादित करते हैं, बल्कि प्रक्रिया से काफी आनंद भी प्राप्त करते हैं।
हालांकि, एक अनुभवी कोडर बनने से पहले,प्रत्येक नौसिखिया एचटीएमएल भाषा और उसके सहयोगी सीएसएस दोनों के लिए विभिन्न निर्देशों और विनिर्देशों का अध्ययन करने में काफी समय बिताती है। यह सीएसएस के बारे में है, यह क्या है, और "कानों के साथ झगड़े" हमें उठने की अनुमति देता है, साथ ही इसके लोकप्रिय गुणों में से एक - स्थिति संबंधित - हम आज बात करेंगे।
सीएसएस क्या है?
आधिकारिक अनुवाद में "टेबल" शब्द बदल गयालगभग दुर्घटना से - वास्तव में, यह "चादरें" या "सूचियों" शब्द का उपयोग करने के लिए अधिक उपयुक्त होगा; फिर भी, प्रारंभिक अनुवाद के लेखकों ने फैसला किया कि सीएसएस तालिका एक सूची से अधिक दिखती है, और हम अब उनका न्याय कैसे कर रहे हैं।
अंत में, शब्द "कैस्केडिंग"। तथ्य यह है कि प्रत्येक तत्व में एक साथ कई शैलियों हो सकती हैं, जो मिश्रण या यहां तक कि छेड़छाड़ कर सकती हैं। ऐसे मामलों में, ब्राउज़र को ब्लॉक की उपस्थिति को सही ढंग से संरेखित करने के लिए नियमों के एक सेट का सहारा लेना पड़ता है, जिसमें कई शैलियों हैं, उनमें से एक के साथ, उदाहरण के लिए, स्थिति संबंधित संपत्ति है, और दूसरा - निरपेक्ष। वास्तव में, इस तरह के संघर्षों की अनुमति नहीं दी जानी चाहिए, लेकिन बड़ी परियोजनाओं में इस तरह की भ्रम अक्सर होती है।
तो अब, जब सब कुछ नाम से स्पष्ट है,आइए एक साधारण उदाहरण देखें। मान लें कि आपकी साइट में एक निश्चित तरीके से डिज़ाइन की गई बड़ी संख्या में बटन होना चाहिए। उनके पास आकार, छाया, पारदर्शिता, रंग जैसी गुण हैं। बेशक, आप प्रत्येक बटन बनाकर इन पैरामीटर को निर्दिष्ट कर सकते हैं, लेकिन सीएसएस का उपयोग करना बहुत आसान होगा। व्यावहारिक रूप से, आपको उस वर्ग का वर्णन करने की आवश्यकता है जिसमें उपर्युक्त सभी गुणों के मूल्य सूचीबद्ध किए जाएंगे, और फिर, प्रत्येक सूची के टैग में, लंबी सूची के बजाय आपको केवल इस वर्ग का नाम निर्दिष्ट करने की आवश्यकता होगी, जिसके बाद ब्राउज़र इन तत्वों को वांछित रंगों में पेंट करेगा और उन्हें उचित देगा "चमक"।
के लिए स्थिति संपत्ति क्या है?
अब हम सीधे संपत्ति में बदल जाते हैंस्थिति, जिसके लिए यह सब लेख शुरू किया गया था। यदि आप अंग्रेजी भाषा से परिचित हैं या आपके पास अच्छी अंतर्ज्ञान है, तो आपको पहले से ही स्पष्ट होना चाहिए - यह संपत्ति तत्व के स्थान के लिए ज़िम्मेदार है। असल में, जिस तरह से यह है, लेकिन एक विशिष्ट स्थान को परिभाषित करने के बजाय, यह संपत्ति ब्राउज़र को बिल्कुल बताती है कि इस या उस तत्व को पड़ोसी पृष्ठों या पूरे पृष्ठ के सापेक्ष कैसे रखा जाना चाहिए।
स्थिति संपत्ति क्या मूल्य ले सकती है?
हमारी संपत्ति कई अलग-अलग मूल्य ले सकती है, उनमें से केवल पांच ही हैं। यहां प्रत्येक का एक संक्षिप्त विवरण दिया गया है:
- स्थिति विरासत। यह संपत्ति आपको एक तत्व के लिए स्थिति डेटा कॉपी करने की अनुमति देती है जो माता-पिता है। उदाहरण के लिए, यदि आपके पास निर्दिष्ट स्थिति सापेक्ष के साथ एक div है, तो आईएमजी को इसके उत्तराधिकारी के मूल्य के साथ अंकित मूल्य भी संबंधित होगा।
- स्थिति स्थिर यह मान स्वचालित रूप से सभी तत्वों को दिया जाता है, जब तक अन्यथा निर्दिष्ट नहीं किया जाता है। तत्व कोड में उल्लिखित स्थिति में फिट होते हैं और विभिन्न "फ्रिल्स" के लिए उपलब्ध नहीं होते हैं जो उन्हें अपनी स्थिति बदलने की अनुमति देते हैं।
- स्थिति पूर्ण स्थिति संपत्ति का यह मूल्य अक्सर उन मामलों में उपयोग किया जाता है जहां "फ़्लोटिंग" तत्व बनाना आवश्यक है। इस संपत्ति मूल्य को प्राप्त करना, तत्व पृष्ठ के शेष घटकों के लिए "अदृश्य" बना हुआ है। यही है, वे व्यवस्थित हैं जैसे कि हमारा पूर्ण तत्व अस्तित्व में नहीं है। वह स्वयं हमेशा जगह पर रहेगा, इससे कोई फर्क नहीं पड़ता कि पृष्ठ कितना दूर स्क्रॉल किया गया था।
- स्थिति फिक्स्ड। कई मायनों में, यह मान पिछले एक जैसा है, हालांकि, पूर्ण तत्व माता-पिता से जुड़ा हुआ है, जबकि निश्चित ब्राउज़र ब्राउज़र के ऊपरी बाएं कोने के केवल निर्देशांक का उपयोग करता है, जो इससे पहले के अन्य तत्वों पर ध्यान नहीं देता है।
- अंत में, स्थिति संबंधित। इस प्रकार का मान तत्वों को दूसरों के सापेक्ष तैनात करने की अनुमति देता है, जो आम लोगों में "रबड़" नामक अनुकूली मार्कअप बनाते समय उपयोगी हो सकता है। इस संपत्ति को रखने के बाद, तत्व पृष्ठ पर अपनी स्थिति बदलने का अवसर खोए बिना आराम को "अलग" कर देगा।
विभिन्न ब्राउज़रों में स्थिति के साथ काम करने की विशेषताएं
सभी ब्राउज़र समान रूप से संगत नहीं हैं। हालांकि किसी भी हिट के बिना इंटरनेट सर्फिंग के लिए अधिकांश वैकल्पिक कार्यक्रम स्थिति के मूल्य को सही ढंग से समझते हैं, "क्रोनिकली स्पेशल" इंटरनेट एक्सप्लोरर इस प्रॉपर्टी को इसके संस्करण के आधार पर मानता है।
उदाहरण के लिए, पहले से ही "दफन" ब्राउज़र का उपयोग करआईई 6, आप फिक्स्ड और इनहेरिट मानों का उपयोग नहीं कर सकते - "गधे" उन्हें आसानी से अनदेखा कर देगा। हालांकि, इस तथ्य के बावजूद कि सातवें संस्करण से स्थिति को ठीक करना शुरू हो गया था, और फिक्स्ड को पहले से संसाधित किया जा रहा था, हर किसी को अपनी पसंदीदा भूमिका "इनहेरिट में ही अन्य आठवें भूमिकाओं में डाउनलोड करने के लिए" ब्राउजर मिल गया।
बाकी पर्यवेक्षकों ने ओपेरा के अपवाद के साथ चुपचाप पहले संस्करणों से स्थिति को संभाला, जिसने 90 के दशक के मध्य में जारी 4 गुणों में इस संपत्ति के लिए समर्थन प्राप्त किया।
जावास्क्रिप्ट में स्थिति के साथ काम करना
असल में काम करने के बारे में एक कहानीजावास्क्रिप्ट में स्थिति संपत्ति के साथ, हम केवल सभ्यता के लिए शामिल थे। चूंकि इस संपत्ति में नाम में कोई विशेष वर्ण नहीं है, इसलिए आप बिना किसी बदलाव के जेएस का उपयोग कर सकते हैं, उदाहरण के लिए, div स्थिति स्थिति सेटर सेट करने के लिए, आपको निम्न पंक्ति शामिल करनी चाहिए: div.style.position = 'relative'।
जैसा कि आप देख सकते हैं, सबकुछ काफी सरल है।
स्थिति सापेक्ष विशेष ध्यान देने योग्य क्यों है?
जबकि अधिकांश संपत्ति मूल्यस्थिति, इसे हल्के ढंग से रखने के लिए, "शैली की स्थिति: रिश्तेदार" के मूल्य का उपयोग करके आसपास के तत्वों पर "स्पॉट" करें, आपको हमेशा पूरे पृष्ठ के बारे में याद रखना चाहिए, क्योंकि इसका गलत उपयोग स्क्रीन की संपूर्ण सामग्री को "मोड़" सकता है।
रिश्तेदार स्थिति का उपयोग कब किया जाना चाहिए?
पारंपरिक HTML पृष्ठों, स्थिति के लेआउट के अलावासापेक्ष अक्सर विभिन्न रोचक प्रभाव बनाने के लिए प्रयोग किया जाता है। उदाहरण के लिए, यदि आप पृष्ठ पर "आओ" के लिए कोई तत्व चाहते हैं या इसके विपरीत, आसानी से अपने किनारों से परे जाएं, तो यह संपत्ति आपको "चाल" का एहसास करने में मदद कर सकती है।
जावास्क्रिप्ट के माध्यम से इसी तरह की "चालें" लागू की जाती हैं,या, यदि आप CSS3 गुणों के माध्यम से प्रगतिशील लेआउट के लिए प्रयास करते हैं, जो आपको चर के मान में चक्रीय परिवर्तन को अनुकूलित करने की अनुमति देता है।
सापेक्ष स्थिति का उपयोग करने के उदाहरण
स्थिति संबंधित बहुत सरल है, लेकिनलचीला उपकरण जो आपको कई रोचक प्रभावों को लागू करने की अनुमति देता है। बेकार टेम्पलेट कोड लिखने पर समय और स्थान बर्बाद न करने के लिए, हम कई मौखिक एल्गोरिदम प्रदान करेंगे जो आपकी वेबसाइट या उसके व्यक्तिगत पृष्ठों को सजाने में सक्षम होंगे।
आइए "रन आउट" लाइन से शुरू करें। मान लीजिए कि आपको ऐसे तत्व की आवश्यकता है जो स्क्रीन के बाएं किनारे की वजह से "छोड़ें" और धीरे-धीरे इसके दाहिने तरफ चले जाए। इस तरह के "तंत्र" को लागू करने के लिए, स्थिति: सापेक्ष; बाएं: -100 पीएक्स, जहां -100 पिक्सल की अनुमानित संख्या है जो ब्लॉक चौड़ाई बनाती है। यह शैली आपको स्क्रीन के बाहर ब्लॉक को छिपाने की अनुमति देगी, इसे "प्रारंभिक स्थिति" पर सेट करेगी। अब आप एक स्क्रिप्ट का उपयोग कर सकते हैं जो बाएं प्रॉपर्टी के मूल्य को प्रत्येक कुछ मिलीसेकंड द्वारा बढ़ाएगा जब तक कि यह ब्राउज़र विंडो की चौड़ाई के बराबर न हो, तत्व की चौड़ाई से कम हो। नतीजतन, हमें बाएं किनारे से दिखाई देने वाला एक ब्लॉक मिलता है, पूरे स्क्रीन पर रोल करता है और "दाएं" दाएं तरफ जाता है।
एक और उदाहरण आपको बनाने की अनुमति देता है"सापेक्ष पूर्ण" तत्व। उदाहरण के लिए, आप स्थिति संबंधित होने वाले दूसरे के अंदर पूर्ण रूप से अंकित कर सकते हैं। नतीजतन, हमारे पास एक "सापेक्ष" ब्लॉक है, जिसका कोई आकार नहीं है, जिसमें एक पूर्ण व्यक्ति अंकित है, जो अब खुद को उस स्थिति में प्रकट कर सकता है जो इससे पहले के तत्वों पर निर्भर करता है।
स्थिति संबंध का उपयोग करते समय सामान्य गलतियों
सबसे आम त्रुटि कबस्थिति संबंध का उपयोग करना यह है कि कई लेआउट डिजाइनर किसी ब्लॉक के लिए स्थान आरक्षित करने की क्षमता को भूल जाते हैं जो कहीं भी हो सकता है। उदाहरण के लिए, यदि आपके पास स्क्रीन के बाहर रखा गया है और रिश्तेदार स्थिति है, तो "छेद" इसके स्थान पर गपशप करेगा। हालांकि, यहां तक कि इस संपत्ति, जो कभी-कभी कुछ असुविधाएं उत्पन्न करती है, का उपयोग अच्छे के लिए किया जा सकता है, उदाहरण के लिए, "स्वयं-संयोजन" वेबसाइट का एक दिलचस्प प्रभाव बनाकर, जिसमें इसके सभी ब्लॉक धीरे-धीरे शीर्ष पर स्थित होते हैं: 0 स्थिति; बाएं: 0; यानी इसकी मूल जगह पर।
