कॅस्केडिंग शैली पत्रकासह ओव्हरॅलिंग एलिमेंट्ज
वेबपेज लेआउटसाठी सीएसएस पोजीशनिंग वापरताना आव्हानांपैकी एक म्हणजे तुमचे काही घटक इतरांना ओव्हरलॅप करतात. आपण HTML मधील शेवटचे घटक शीर्षस्थानी हवे असल्यास चांगले कार्य करते परंतु आपण काय करीत नाही किंवा जर आपण अशा घटकांना हवी असल्यास काय करावे जेणेकरुन इतरांना हे करू नये म्हणून हे डिझाइन कॉल करेल कारण "स्तरीय" देखावा ? घटकांचे ओव्हरलॅप करण्याच्या पद्धतीने बदलण्यासाठी आपल्याला सीएसएसची मालमत्ता वापरणे आवश्यक आहे.
आपण Word आणि PowerPoint किंवा Adobe Photoshop सारख्या अधिक मजबूत प्रतिमा संपादकामध्ये एक ग्राफिक्स साधने वापरली असेल तर आपण शक्यता आहे की z-index कार्यरत असते. या प्रोग्राममध्ये, आपण काढलेल्या ऑब्जेक्ट्स (हा) हायलाइट करू शकता आणि आपल्या दस्तऐवजाच्या काही घटकांच्या "पुढे पाठविण्यासाठी" किंवा "समोर आणा" पर्याय निवडा. फोटोशॉप मध्ये, आपल्याकडे ही फंक्शन्स नाहीत, परंतु तुमच्याकडे "लेयर" पेन आहे आणि आपण या लेयर्सची पुनर्रचना करून एखादा कॅन्वयर कॅनव्हालमध्ये येतो. या दोन्ही उदाहरणात, आपण मूलत: त्या ऑब्जेक्ट्स चे झिंक इंडेक्स सेट करीत आहात.
झिंक इंडेक्स म्हणजे काय?
पृष्ठावर घटकांची स्थिती निर्धारित करण्यासाठी आपण सीएसओ पोजीशनिंग वापरत असता, आपण तीन परिमाणे विचार करणे आवश्यक आहे. दोन मानक परिमाणे आहेत: डावे / उजवे आणि शीर्ष / तळाचे डावीकडून उजवीकडे निर्देशांक एक्स-इंडेक्स म्हणून ओळखला जातो, तर सर्वात वरपासून खाली y- निर्देशांक असतो. या दोन अनुक्रमणिका वापरून, आपण क्षैतिज किंवा अनुलंब घटक कसे ठेवाल हे असे आहे.
जेव्हा वेब डिझाईनमध्ये येतो, तेव्हा पृष्ठाची स्टॅकिंग ऑर्डर देखील असते. पृष्ठावरील प्रत्येक घटक कोणत्याही अन्य घटकांपेक्षा वर किंवा खाली स्तरित केला जाऊ शकतो. Z- निर्देशांक प्रॉपर्टी प्रत्येक घटकामध्ये स्टॅक कुठे आहे हे निर्धारीत करते. जर एक्स-इंडेक्स आणि वाई-इंडेक्स क्षैतिज आणि उभ्या रेषा आहेत, तर झिड इंडेक्स हे पेजची खोली आहे, मूलत: 3 रा आयाम.
मला वेबपृष्ठ वरील घटकांचा कागदाच्या तुकड्यात विचार करणे आवडते, आणि वेब पृष्ठ स्वतः कोलाज म्हणून. जिथे मी पेपर घालते तो स्तितीद्वारे निर्धारित केले जाते, आणि त्यातील इतर घटकांद्वारे किती समाविष्ट आहे ते z-index आहे.
Z- अनुक्रमणिका एक संख्या आहे, एकतर सकारात्मक (उदा. 100) किंवा नकारात्मक (उदा -100). मुलभूत z- निर्देशांक 0 आहे. सर्वोच्च z- निर्देशांक असलेला घटक सर्वात वर आहे, त्यानंतर पुढील सर्वोच्च आणि सर्वात कमी झिंक-निर्देशांक पर्यंत. जर दोन घटकांमध्ये समान z- अनुक्रमणिका मूल्य असेल (किंवा ते परिभाषित केलेले नाही, तर याचा अर्थ 0 चा मुलभूत मूल्य वापरा) ब्राउझर त्यांना HTML मध्ये दिसतात त्या क्रमाने परत करेल.
Z- निर्देशांक कसे वापरावे
आपल्या स्टॅकमध्ये प्रत्येक घटक द्या म्हणजे भिन्न z- अनुक्रमणिका मूल्य द्या. उदाहरणार्थ, माझ्याकडे पाच वेगवेगळे घटक असतील तर:
- घटक 1 - झिंक इंडेक्स -25
- घटक 2 - झिंक इंडेक्स 82
- घटक 3 - z- अनुक्रमणिका सेट नाही
- घटक 4 - झिंक इंडेक्स 10
- घटक 5 - -3 मधील z- अनुक्रमणिका
ते खालील क्रमबद्ध होतील:
- घटक 2
- घटक 4
- घटक 3
- घटक 5
- घटक 1
मी आपले घटक स्टॅक करण्यासाठी अत्यंत भिन्न z- निर्देशांक मूल्ये वापरण्याची शिफारस करतो. त्या मार्गाने, आपण नंतर पृष्ठामध्ये अधिक घटक जोडल्यास, आपल्याकडे इतर सर्व घटकांच्या z- निर्देशांक मूल्यांचे समायोजन न करता त्यांना स्तर घालण्यासाठी कक्ष आहे. उदाहरणार्थ:
- माझ्या सर्वोच्च-सर्वात घटकांसाठी 100
- माझ्या मधल्या घटकासाठी 0
- माझ्या तळ घटकांसाठी -100
आपण दोन घटकांना समान z- अनुक्रमणिका मूल्य देखील देऊ शकता. जर हे घटक स्टॅक केलेले असतील तर ते शीर्षस्थानी असलेल्या शेवटच्या घटकासह, त्या HTML मध्ये लिहिलेल्या क्रमाने प्रदर्शित होतील.
एक टीप, एखाद्या घटकास प्रभावीपणे z- निर्देशांक गुणधर्म वापरण्यासाठी, तो एक ब्लॉक स्तर घटक असणे आवश्यक आहे किंवा आपल्या सीएसएस फाईलमध्ये "ब्लॉक" किंवा "इनलाइन ब्लॉक" चे प्रदर्शन वापरणे आवश्यक आहे.
जेनिफर क्रिनिन द्वारे मूळ लेख. जेरेमी गिरर्ड यांनी 12/09/16 रोजी संपादित केले