CSS स्थिती निर्धारण फक्त X पेक्षा अधिक आहे, Y निर्देशक
सीएसएस पोजीशनिंग लांब वेबसाइट लेआउट तयार करण्याचा एक महत्वाचा भाग आहे जरी फ्लेक्सबॉक्स आणि सीएसएस ग्रिडसारख्या नवीन सीएसएस लेआउट तंत्रज्ञानाच्या उदयाने, कोणत्याही वेब डिज़ाइनरच्या युक्त्यांच्या पिशव्यामध्ये स्थानाची स्थिती अजूनही महत्त्वाची आहे.
सीएसएस पोजीशनिंग वापरताना, आपण प्रथम घटक जे करणे आवश्यक आहे ते सीएसएस प्रॉपर्टी स्थापन करण्यासाठी ब्राउझरला सांगू शकेल जर आपण एखाद्या विशिष्ट घटकासाठी परिपूर्ण किंवा सापेक्ष स्थिती वापरणार आहात. या दोन्ही स्थानीक गुणधर्मांमधील फरक स्पष्टपणे समजून घेणे आवश्यक आहे.
परिपूर्ण आणि रिलेटिव्ह दोन सीएसएस स्थिती गुणधर्म बहुतेकदा वेब डिझाइन मध्ये वापरले जातात, स्थितीत मालमत्ता प्रत्यक्षात चार राज्ये आहेत:
- स्थिर
- परिपूर्ण
- नातेवाईक
- निश्चित
स्थिर वेब पृष्ठावरील कोणत्याही घटकासाठी डिफॉल्ट स्थान आहे. आपण एखाद्या घटकाची स्थिती परिभाषित करत नसल्यास, ते स्थिर असेल. याचा अर्थ असा की तो HTML डॉक्युमेंटमध्ये आहे आणि त्या दस्तऐवजाच्या सामान्य प्रवाहाच्या आत कसे प्रदर्शित होईल यावर आधारित स्क्रीनवर प्रदर्शित होईल.
आपण शीर्षस्थानी पोझीशन नियम लागू केल्यास किंवा स्थिर स्थितीत असलेल्या घटकाकडे डाव्या तर त्या नियमांचे दुर्लक्ष केले जाईल आणि सामान्य दस्तऐवज प्रवाहामध्ये ते कोठे दिसतील ते घटक तशीच राहील. खरंच, आपण क्वचितच, जर शक्य असेल तर, सीएसएस मध्ये स्थिर स्थितीत घटक सेट करणे आवश्यक आहे कारण ही डीफॉल्ट व्हॅल्यू आहे.
संपूर्ण सीएसएस स्थिती
संपूर्ण स्थिती कदाचित समजण्यासाठी सर्वात सोपा सीएसएस स्थिती आहे. आपण या सीएसएस स्थळ मालमत्तेसह प्रारंभ करता:
स्थान: परिपूर्ण;हे मूल्य ब्राउझरला सांगते की जे काही होणार आहे ते कागदपत्रांच्या सामान्य प्रवाहामधून काढले पाहिजेत आणि त्याऐवजी पृष्ठावर अचूक स्थानावर ठेवले. हे त्या घटकाच्या जवळच्या नॉन-स्टॅटिकली डेजिस्टर पूर्वजांवर आधारित मोजले जाते.
कारण एक पूर्णपणे स्थितीयुक्त घटक कागदपत्रांच्या सामान्य प्रवाहामधून काढला जातो, त्यामुळे वेबवर आधी किंवा त्याच्या नंतरचे घटक HTML पृष्ठावर कसे तैनात केले जातात यावर त्याचा प्रभाव पडणार नाही.
एक उदाहरण म्हणून - जर आपल्याकडे एखादा विभाग असेल जो नातेवाईकाच्या व्हॅल्यूद्वारे घेतले असेल (आम्ही लवकरच हे मूल्य पाहू), आणि या विभागात आपणास पॅराग्राफ होता ज्याला आपण भागाच्या वरच्या भागातील 50 पिक्सेल स्थानावर आणू इच्छित आहात तर आपण त्याप्रमाणे "शीर्ष" मालमत्तेवरील 50px च्या ऑफसेट मूल्यासह त्या पॅराग्राफसाठी "परिपूर्ण" चे स्थान मूल्य जोडले जाईल.
स्थान: परिपूर्ण; शीर्ष: 50 पीएक्स;हे पूर्णपणे स्थितीयुक्त घटक त्या तुलनेने स्थितीत असलेल्या विभागाच्या वरून नेहमीच 50 पिक्सेल प्रदर्शित करेल - सामान्य प्रवाहात कोणता फरक आहे हे दर्शविते. आपल्या "तंतोतंत" स्थानीवारित घटक त्याचा संदर्भित म्हणून वापरले जाणारे एक वापरले होते आणि आपण वापरत असलेल्या मूल्यानुसार मूल्य संबंधीत असते.
आपण वापरण्यासाठी उपलब्ध असलेल्या चार पोजिशनिंग गुणधर्म हे आहेत:
- शीर्षस्थानी
- उजवीकडे
- तळ
- डावीकडे
आपण यापैकी एक किंवा वरचा तळाचा वापर करू शकता (या दोन्ही मूल्यांनुसार एका ओळीची स्थिती कोठे स्थित करता येऊ शकत नाही) आणि उजव्या किंवा डाव्या
एखादा घटक निरपेक्ष स्थितीत सेट आहे, परंतु तेथे त्याचे अस्तित्व नसलेल्या अवतारीत पूर्वजांना आहे, तर ते शरीर घटकाच्या तुलनेत स्थित केले जाईल, जे पृष्ठाचे सर्वोच्च पातळीवरील घटक आहे.
सापेक्ष स्थिती
आम्ही आधीच सापेक्ष स्थितीत उल्लेख, त्यामुळे आता त्या मालमत्ता बघूया
रिलेटिव्ह पोजिशनिंग ही चार पोजीशनिंग गुणधर्मांचा परिपूर्ण पोझीशनिंग वापरते, परंतु घटकांच्या स्थितीला त्याच्या जवळच्या नॉन-स्टॅटिकली स्थानिय पूर्वज वर बसविण्याऐवजी, ते घटक जिथे ते सामान्य प्रवाहामध्ये अजूनही असतील ते पासून सुरू होते.
उदाहरणार्थ, आपल्या वेब पृष्ठावर आपल्यास तीन परिच्छेद असल्यास आणि तिसऱ्याकडे "स्थान: नातेवाईक" शैली आहे, त्यास त्याचे स्थान वर्तमान स्थानावर आधारित ऑफसेट केले जाईल.
परिच्छेद 1.
परिच्छेद 2.
परिच्छेद 3.
वरील उदाहरणामध्ये, तिसरा परिच्छेद कंटेनर घटकांच्या डाव्या बाजूने 2em केला जाईल, परंतु तरीही पहिल्या दोन परिच्छेदाच्या खाली असेल. हे दस्तऐवजाच्या सामान्य प्रवाहात राहील आणि फक्त थोडीशी ऑफसेट करा. आपण ते स्थानावर बदलले तर: निरपेक्ष; त्यास खालील काहीही त्या वर प्रदर्शित होईल, कारण तो दस्तऐवजाच्या सामान्य प्रवाहामध्ये यापुढे राहणार नाही.
एखाद्या वेब पृष्ठावरील घटक नेहमी स्थितीचे मूल्य सेट करण्यासाठी वापरले जातात: ऑफसेट व्हॅल्यूच्या तुलनेत सापेक्ष असण्याचा कोणताही अर्थ नसतो, याचा अर्थ असा होतो की ते सामान्य प्रवाहांमध्ये दिसून येतील. हे असे घटक घडवून आणण्यासाठी पूर्णपणे केले जाते की ज्या संदर्भातील इतर घटक पूर्णपणे स्थित केले जाऊ शकतात. उदाहरणार्थ, जर आपल्याकडे आपल्या संपूर्ण वेबसाइटला "कंटेनर" (जे वेब डिझाइनमधील एक अतिशय सामान्य स्थिती आहे) च्या वर्ग मूल्यासह भोवती आढळते, तर ते विभाजन संबंधित स्थितीवर सेट केले जाऊ शकते जेणेकरून त्यातील काहीही वापरु शकतात तो एक स्थिती संदर्भ म्हणून.
निश्चित स्थितीबद्दल काय?
निश्चित स्थिती खूपच स्थिर असते. घटकांची स्थिती निरपेक्ष मॉडेल प्रमाणे गणना केली जाते, परंतु त्या ठिकाणी निश्चित घटक निश्चित केले जातात- जवळजवळ वॉटरमार्कसारखे . पृष्ठावर दुसरे सर्वकाही त्या घटकाच्या मागील खांब करेल.
या प्रॉपर्टी व्हॅल्यूचा वापर करण्यासाठी, तुम्ही सेट कराल:
स्थिती: निश्चित;लक्षात ठेवा, जेव्हा आपण आपल्या साइटवर एखादा घटक निश्चित करता तेव्हा, त्या ठिकाणी आपले वेब पृष्ठ मुद्रित झाल्यावर ते मुद्रित होईल उदाहरणार्थ, जर आपल्या पृष्ठाच्या शीर्षस्थानी आपला घटक निश्चित केला असेल, तर तो प्रत्येक मुद्रित पृष्ठाच्या शीर्षस्थानी दिसून येईल - कारण पृष्ठाच्या शीर्षस्थानी तो निश्चित आहे मुद्रित पृष्ठे निश्चित घटक कसे प्रदर्शित करतात ते बदलण्यासाठी आपण मीडिया प्रकार वापरू शकता:
@ मीडिया स्क्रीन {h1 # first {position: fixed; }} @ मीडिया प्रिंट {h1 # first {position: static; }}जेनिफर क्रिनिन द्वारे मूळ लेख. 1/7/16 रोजी जेरेमी गिरर्ड द्वारा संपादित.