रिश्तेदार की स्थिति - यह क्या है? विस्तृत विवरण

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

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

सीएसएस क्या है?

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

शब्द "तालिका" आधिकारिक अनुवाद में दुर्घटना से लगभग दिखाई दिया - वास्तव यहाँ और अधिक उपयुक्त शब्द "सूचियों" या "सूचियों" का उपयोग करने में किया जाएगा, हालांकि मूल अनुवाद के लेखकों ने फैसला किया कि सीएसएस एक सूची से अधिक की तरह लग रहा है, और हम कौन हैं इस तरह अब उन्हें कोशिश करने के लिए है।

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

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

स्थिति संपत्ति क्या करता है?

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

क्या मूल्यों स्थिति संपत्ति कर सकते हैं?

हमारी संपत्ति कई अलग-अलग मान स्वीकार कर सकते हैं, वहाँ केवल पाँच कर रहे हैं। यहाँ प्रत्येक का एक संक्षिप्त विवरण है:

• स्थिति इनहेरिट। यह सुविधा आपको तत्व एक माता पिता है कि की स्थिति पर डेटा की प्रतिलिपि करने की अनुमति देता है। उदाहरण के लिए, यदि आप एक निर्दिष्ट सापेक्ष स्थिति के साथ एक div है, तो इसे में आईएमजी इनहेरिट मूल्य भी सापेक्ष पर सेट हो जाएगा के साथ प्रवेश किया।
• स्टेटिक स्थित करें। यह मान जब तक किसी भी अधिक कहा गया है, स्वचालित रूप से सभी तत्वों को दिया जाता है। तत्वों, के रूप में कोड में उल्लेख किया है और "तामझाम" की एक किस्म के लिए उपलब्ध नहीं हैं स्थिति में फिट अपनी स्थिति बदलने के लिए अनुमति देता है।
• स्थिति निरपेक्ष। इस मान से स्थिति संपत्ति अक्सर ऐसे मामलों में जहां यह आवश्यक है एक तत्व "चल" बनाने के लिए प्रयोग किया जाता है। संपत्ति आइटम की दी गई मूल्य के साथ पेज के अन्य घटकों के लिए "अदृश्य" है। यही कारण है, वे के रूप में यदि हमारे पूर्ण तत्व मौजूद नहीं है व्यवस्थित कर रहे हैं। वह खुद को हमेशा जगह में होगा, कितनी दूर पेज स्क्रॉल किया गया की परवाह किए बिना।
• स्थिति ठीक किया गया। कई मायनों में, यह मान पिछले एक के समान है, है, जबकि पूर्ण तत्व, फिक्स्ड माता-पिता के लिए बाध्य है का उपयोग करता है केवल ब्राउज़र स्क्रीन के ऊपरी बाएँ कोने के निर्देशांक, तत्वों उसके पहले के बाकी अनदेखी है, तथापि।
• अंत में, रिश्तेदार की स्थिति। इस प्रकार के मूल्यों अन्य है, जो आम "रबर" में बुलाया गया चिह्नित करने के एक अनुकूली बनाने के लिए उपयोगी हो सकता है के लिए स्थिति तत्व रिश्तेदार अनुमति देता है। इस संपत्ति के साथ, आइटम "धक्का" होगा अन्य, पेज पर अपनी स्थिति को बदलने की क्षमता खोने के बिना।

विभिन्न ब्राउज़रों में स्थिति के साथ कार्य करना

नहीं सभी ब्राउज़रों समान रूप से संगत हैं। जबकि कथित स्थिति का मूल्य किसी भी hitches के बिना इंटरनेट सर्फिंग के लिए सबसे अधिक विकल्प कार्यक्रमों बिल्कुल सच है, "लंबे समय से विशेष» इंटरनेट एक्सप्लोरर संपत्ति, समझता है अपने संस्करण के आधार पर।

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

पर्यवेक्षकों के बाकी शांति से ओपेरा के अपवाद है, जो अपनी 4 रूपों में संपत्तियों की समर्थन मिल गया है, मध्य 90 के दशक में प्रकाशित के साथ पहले संस्करण के साथ स्थिति को संभालने,।

जावास्क्रिप्ट में स्थिति के साथ कार्य करना

वास्तव में, कैसे जावास्क्रिप्ट में स्थिति संपत्ति के साथ काम करने की कहानी है, हम केवल शालीनता की खातिर शामिल किया है है। क्योंकि इस संपत्ति शीर्षक में कोई विशेष वर्ण नहीं है, आप जे एस बिना किसी परिवर्तन के, उदाहरण के लिए उपयोग कर सकते हैं, div सापेक्ष स्थिति निर्धारित करने के लिए, इस तरह की एक पंक्ति शामिल करना चाहिए: div.style.position = 'रिश्तेदार'।

आप देख सकते हैं, यह बहुत आसान है।

क्यों सापेक्ष स्थिति को विशेष ध्यान?

संपत्ति मूल्यों स्थिति के अधिकांश, यह हल्का, आसपास के तत्वों पर "विवाद", मूल्य का उपयोग कर "शैली स्थिति: रिश्तेदार" डाल करने के लिए करते हैं, हमेशा एक पूरे के रूप में पूरे पृष्ठ के बारे में याद रखना चाहिए, क्योंकि अनुचित उपयोग हो सकता है दृढ़ता से "तिरछा" स्क्रीन की संपूर्ण सामग्री ।

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

जब आप रिश्तेदार पोजीशनिंग इस्तेमाल करना चाहिए?

पृष्ठ HTML के पारंपरिक लेआउट के अलावा, सापेक्ष स्थिति अक्सर रोचक प्रभाव की एक किस्म बनाने के लिए इस्तेमाल किया। उदाहरण के लिए, यदि आप किसी आइटम चाहते हैं एक पृष्ठ पर "आया" या, इसके विपरीत, धीरे-धीरे अपने क्षेत्र परे चला गया है, यह ठीक है इस संपत्ति आप इस "चाल" को लागू कर सकते हैं।

इन "चाल" जावास्क्रिप्ट के माध्यम से लागू किया जाता है अगर आप CSS3 के गुणों, जो आप एक विशेष चर के मूल्य में चक्रीय परिवर्तन को समायोजित करने की अनुमति के माध्यम से प्रगतिशील लगाने के लिए लक्ष्य है, या,।

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

सापेक्ष रैंकिंग उपयोग करने के उदाहरण

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

के "रन आउट" लाइन के साथ शुरू करते हैं। मान लीजिए आप एक तत्व है कि "यात्रा" क्योंकि स्क्रीन के बाएं किनारे और धीरे धीरे सही पक्ष में ले जाएगा के लिए एक की जरूरत है। इस तरह के एक "तंत्र" की स्थिति निर्धारित करना चाहिए लागू करने के लिए: रिश्तेदार; बाएं: -100px, जहां -100 - पिक्सेल ब्लॉक चौड़ाई का गठन करने की अनुमानित संख्या। इस शैली को आप स्क्रीन के बाहर इकाई को छिपाने के लिए, "प्रारंभिक स्थिति" में रखने की अनुमति होगी। अब आप एक स्क्रिप्ट है कि हर कुछ प्रति यूनिट संपत्ति के मूल्य के लिए छोड़ दिया जब तक कि यह ब्राउज़र विंडो की चौड़ाई शून्य से तत्व की चौड़ाई के बराबर नहीं बन जाता है के रूप में मिलीसेकेंड में वृद्धि होगी उपयोग कर सकते हैं। परिणाम एक इकाई है कि बाएं किनारे से बाहर आता है, स्क्रीन पर लुढ़का हुआ है और "पार्क किए गए" उसके दाहिने हाथ में है।

एक अन्य उदाहरण आप "रिश्तेदार-निरपेक्ष" तत्वों को बनाने के लिए अनुमति देता है। उदाहरण के लिए, यदि आप किसी अन्य के अंदर एक पूर्ण प्रवेश कर सकते हैं, सापेक्ष स्थिति हो रही है। एक परिणाम के रूप में, हम एक "रिश्तेदार" ब्लॉक है कि आकार जो करने के लिए पूर्ण लिखा हुआ है नहीं है है, अब की स्थिति पिछले तत्व के स्वतंत्र स्पष्ट नजर करने में सक्षम है।

ठेठ गलतियों जब सापेक्ष स्थिति का उपयोग कर

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