स्थिति सापेक्ष - यो के हो? विस्तृत विवरण

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

तथापि, तपाईं एक अनुभवी बदलनेवाला बन्न अघि, प्रत्येक नव आगन्तुक विभिन्न निर्देशन र दुवै HTML भाषा को विनिर्देशों अध्ययन धेरै समय बिताउँछन्, र यसको सहयोगी मा - CSS। ठ्याक्कै बारेमा के CSS, स्थिति सापेक्ष - - यो के हो र के "feint कान" तपाईं प्राप्त गर्न अनुमति दिन्छ, साथै यसको शीर्ष गुण को एक आज हामी कुरा छौँ।

CSS के हो?

CSS संक्षिप्त लिखित र "क्यासकेडिङशैलीपाना पानाहरू" को रूपमा मा रूसी अनुवाद गर्न सकिन्छ। यो धेरै अनौठो सुनिन्छ - एक हात मा, यो स्पष्ट देखिन्छ, र शब्द र अन्य मा - सामान्य अर्थ तुरुन्तै कब्जा छैन। शैली संग - का सरल सुरु गरौँ। यो प्रविधि के तपाईं एक पटक मात्र दर्ता र समय को असीमित नम्बर प्रयोग गर्न सक्ने उपस्थिति सन्दर्भमा पृष्ठमा वस्तुहरु, केही विशेषताहरु संलग्न गर्न अनुमति दिन्छ।

वास्तवमा यहाँ थप उपयुक्त हुनेछ शब्द "सूची" वा "सूची" प्रयोग गर्न हुन मा, तर मूल अनुवाद को लेखक सीएसएस सूची भन्दा बढी जस्तो देखिन्छ निर्णय, र हामी जो - शब्द "तालिका" आधिकारिक अनुवाद संयोगले लगभग देखा यस्तो तिनीहरूलाई प्रयास गर्न अब छ।

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

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

स्थिति सम्पत्ति के गर्छ?

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

के मान स्थिति सम्पत्ति गर्न सक्छन्?

हाम्रो सम्पत्ति धेरै फरक मान स्वीकार गर्न सक्छन्, त्यहाँ पाँच मात्र छन्। यहाँ प्रत्येक एक संक्षिप्त विवरण छ:

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

विभिन्न ब्राउजरहरूमा स्थिति संग काम

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

तिनीहरू केवल यसलाई बेवास्ता "गधा" - उदाहरणका लागि, पहिले नै "गाडे" ब्राउजर IE6 को प्रयोग गरेर तपाईंले निश्चित मूल्य र हकदार प्रयोग गर्न सक्दैन। तर, स्थिति को सातौं संस्करण सुधार गर्न थाले, र प्रिय वंशानुगतप्राप्तगर्नुहोस् गर्न, निश्चित पहिले नै प्रक्रिया भन्ने तथ्यलाई बावजुद "ब्राउजर अन्य ब्राउजरहरूमा डाउनलोड गर्न," मात्र यसको आठौं incarnation मा पुगेको छ।

को देख्ने बाँकी शान्तपूर्वक मध्य-90 को दशक मा प्रकाशित आफ्नो 4 भेरिएसनहरूमा मा गुण को समर्थन पायो छ जो ओपेरा को अपवाद, संग, पहिलो संस्करण संग स्थिति सम्हाल्न।

जाभास्क्रिप्ट मा स्थिति संग काम

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

तपाईं देख्न सक्नुहुन्छ, यो राम्रो सरल छ।

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

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

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

जब तपाईं नातेदार स्थिति प्रयोग गर्नुपर्छ?

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

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

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

सापेक्षिक स्तर प्रयोग उदाहरणहरू

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

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

अर्को उदाहरण के तपाईं "नातेदार-निरपेक्ष" तत्व सिर्जना गर्न अनुमति दिन्छ। उदाहरणका लागि, तपाईं एक निरपेक्ष अर्को भित्र, स्थिति सापेक्ष भइरहेको प्रविष्ट गर्न सक्नुहुन्छ। फलस्वरूप, हामी निरपेक्ष कुँदिएको छ जो आकार छैन कि एक "नातेदार" ब्लक छ, अब अघिल्लो तत्व स्वतन्त्र स्थिति नै प्रकट गर्न सक्षम छ।

स्थिति सापेक्ष प्रयोग गर्दा विशिष्ट गल्ती

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