नि: शुल्क तत्व पोजिशनिंग: किसी भी तत्व के लिए सापेक्ष और पूर्ण स्थिति
मास्टर एडॉन्स में पोजिशनिंग एक्सटेंशन मुफ्त है और प्रत्येक विजेट, कॉलम, सेक्शन और कंटेनर के उन्नत टैब में एक पोजिशनिंग पैनल जोड़ता है सापेक्ष या निरपेक्ष उठाओ, फिर डेस्कटॉप, टैबलेट और फोन के लिए अलग-अलग मूल्यों के साथ पीएक्स, ईएम या% में शीर्ष, दाएं, नीचे और बाएं ऑफसेट बैज के लिए इसका उपयोग करें जो एक तस्वीर को ओवरलैप करते हैं, आकार जो एक अनुभाग से बाहर निकलते हैं, या लेबल जगह में कुहनी से।
सापेक्ष, निरपेक्ष और स्थिर स्थिति
स्थिति प्रकार चुनें जो नौकरी से मेल खाता है सापेक्ष अपने पड़ोसियों को स्थानांतरित किए बिना अपने सामान्य स्थान से एक तत्व को स्थानांतरित करता है निरपेक्ष निकटतम स्थित माता-पिता के अंदर सटीक ऑफसेट पर रखता है स्थिर और डिफ़ॉल्ट सामान्य पृष्ठ प्रवाह को बनाए रखता है स्थिति प्रकार प्रति डिवाइस भिन्न हो सकता है, इसलिए एक तत्व डेस्कटॉप पर ओवरलैप कर सकता है और फोन पर प्रवाह में बैठ सकता है।
- सापेक्ष स्थिति: फाइन-ट्यून संरेखण, जैसे किसी आइकन को बाईं ओर कुछ पिक्सेल स्थानांतरित करना।
- पूर्ण स्थिति: किसी अनुभाग के अंदर कहीं भी बैज, सजावटी आकार या लेबल लगाएं।
- आगंतुकों स्क्रॉल करते समय स्क्रीन पर कुछ पिन करने की आवश्यकता है विजेट और कंटेनरों पर एलिमेंटर की अपनी स्थिति सेटिंग में फिक्स्ड विकल्प का उपयोग करें।
हर तरफ से ऑफसेट, साथ ही केंद्र से भी
पीएक्स, ईएम या% में शीर्ष, दाएं, नीचे और बाएं सेट करें, जिसमें नकारात्मक मान शामिल हैं जो किसी तत्व को उसके माता-पिता के किनारे से आगे बढ़ाते हैं एक उत्पाद कार्ड के शीर्ष से एक “न्यू” बैज १० पीएक्स और दाईं ओर से १५ पीएक्स से केंद्र विकल्प अपने माता-पिता के क्षैतिज केंद्र से एक तत्व को ऑफसेट करता है, जो केंद्रित अतिव्यापी प्रभावों के साथ मदद करता है।
- चार-तरफा नियंत्रण: माता-पिता के सभी चार किनारों से दूरी निर्धारित करें।
- केंद्र से: बाएं किनारे के बजाय माता-पिता के मध्य से स्थिति।
- प्रति डिवाइस Z-Index: तय करें कि चीजें ओवरलैप होने पर कौन सा तत्व शीर्ष पर बैठता है।
- पैनल आपको चेतावनी देता है कि बाएं और केंद्र से एक ही तत्व पर गठबंधन न करें।
एलिमेंट की स्थिति सेटिंग बनाम मास्टर ऐडऑन पोजिशनिंग
दोनों स्वतंत्र हैं, और वे थोड़ा अलग समस्याओं को हल करते हैं इस तालिका का उपयोग एक तत्व के लिए सही एक लेने के लिए करें अधिक लेआउट नियंत्रण के लिए, जोड़ी के साथ पोजिशनिंग कंटेनर अतिरिक्तके साथ आंदोलन जोड़ें, या रूप बदल देती है (प्रो).
| एलिमेंट पद | मास्टर ऐडऑन पोजिशनिंग | |
|---|---|---|
| कीमत | मुक्त | मुक्त |
| स्थिति प्रकार | डिफ़ॉल्ट, निरपेक्ष, निश्चित | डिफ़ॉल्ट, स्थैतिक, सापेक्ष, निरपेक्ष |
| ऑफसेट | एक क्षैतिज और एक ऊर्ध्वाधर | ऊपर, दाएं, नीचे, बाएं और केंद्र से |
| प्रति डिवाइस स्थिति प्रकार | नहीं | हाँ |
| पर काम करता है | विजेट और कंटेनर | विजेट, कंटेनर, अनुभाग और कॉलम |
| स्क्रॉल करते समय स्क्रीन पर रहता है | हाँ, फिक्स्ड के साथ | नहीं |
पोजिशनिंग के साथ एलिमेंटर में तत्वों को ओवरलैप कैसे करें
यह उदाहरण एक उत्पाद छवि के ऊपरी दाएं कोने पर एक “Sale” बैज डालता है। वही चरण आकृतियों, चिह्नों और लेबलों के लिए काम करते हैं।
- सुनिश्चित करें कि पोजिशनिंग एक्सटेंशन मास्टर एडॉन्स डैशबोर्ड में चालू है।
- छवि और बैज विजेट को एक ही कंटेनर में रखें।
- कंटेनर का चयन करें, उन्नत > पोजिशनिंग पर जाएं और स्थिति प्रकार को सापेक्ष पर सेट करें।
- बैज का चयन करें, स्थिति प्रकार को पूर्ण पर सेट करें, फिर शीर्ष और दाएं को 10px पर सेट करें।
- बैज के Z-सूचकांक को 2 पर सेट करें ताकि यह छवि से ऊपर रहे।
- टैबलेट और मोबाइल दृश्य पर स्विच करें और प्रत्येक स्क्रीन के लिए ऑफसेट समायोजित करें।
पूरा कार्ड क्लिक करने योग्य होना चाहते हैं जोड़ें रैपर लिंक कंटेनर के लिए पैनल कवर नहीं करता है कुछ भी के लिए, के साथ अपने स्वयं के नियम लिखें कस्टम सीएसएस.
पोजिशनिंग के लिए अक्सर पूछे जाने वाले प्रश्न
यह एलिमेंट की अपनी स्थिति सेटिंग से कैसे अलग है?
विजेट और कंटेनरों पर एलिमेंटर की स्थिति सेटिंग एक क्षैतिज और एक ऊर्ध्वाधर ऑफसेट के साथ डिफ़ॉल्ट, निरपेक्ष और निश्चित प्रदान करती है मास्टर एडॉन्स एक्सटेंशन रिलेटिव और स्टेटिक जोड़ता है, आपको सभी चार पक्षों को सेट करने देता है, एक केंद्र ऑफसेट जोड़ता है, स्थिति प्रकार को प्रति डिवाइस बदलने देता है, और क्लासिक अनुभागों और स्तंभों पर भी काम करता है इसमें फिक्स्ड शामिल नहीं है, इसलिए तत्वों के लिए एलिमेंटर की सेटिंग का उपयोग करें जो स्क्रॉल करते समय स्क्रीन पर रहना चाहिए।
जब मैं एब्सोल्यूट पोजिशनिंग का उपयोग करता हूं, तो यह "सापेक्ष" किस स्थिति में होता है?
एक बिल्कुल स्थित तत्व निकटतम माता-पिता के अंदर रखा जाता है जिसकी स्थिति स्थिर नहीं है यदि किसी भी माता-पिता की स्थिति सेट नहीं है, तो ऑफसेट को माता-पिता से पृष्ठ के आगे मापा जाता है, और तत्व कहीं अप्रत्याशित रूप से समाप्त हो सकता है इससे बचने के लिए, कंटेनर या कॉलम का चयन करें जो तत्व को रखता है और पहले सापेक्ष के लिए इसकी स्थिति प्रकार सेट करता है।
क्या यह मोबाइल और टैबलेट पर ठीक से काम करेगा?
हाँ स्थिति प्रकार, सभी चार ऑफसेट, केंद्र और जेड-इंडेक्स से प्रत्येक डेस्कटॉप, टैबलेट और मोबाइल के लिए अलग-अलग मान स्वीकार करते हैं डेस्कटॉप पर बाईं ओर से १०० पीएक्स रखा गया तत्व फोन स्क्रीन से गिर सकता है, इसलिए टैबलेट और मोबाइल विचारों पर स्विच करें और वहां संख्याओं को समायोजित करें आप सामान्य लेआउट में तत्व को वापस रखने के लिए मोबाइल पर स्टेटिक पर स्थिति प्रकार भी सेट कर सकते हैं।
क्या मैं इसका उपयोग एक अद्वितीय आकार का अनुभाग बनाने या कंटेनर से बाहर निकलने के लिए कर सकता हूं?
हाँ कंटेनर को सापेक्ष पर सेट करें, इसके अंदर एक छवि या आकार रखें, उस तत्व को निरपेक्ष पर सेट करें, और इसे एक नकारात्मक ऑफसेट दें जैसे कि बाएं: -५० पीएक्स तत्व कंटेनर के किनारे पर लटका हुआ है, जो कि अधिकांश ओवरलैपिंग हीरो और कार्ड डिज़ाइन कैसे बनाए जाते हैं।
ट्रेंडिंग एलिमेंटर विजेट और एक्सटेंशन
कम समय में परिष्कृत वेबसाइट बनाएं।
ग्लासमोर्फिज्म
कंटेनर अतिरिक्त
पैटर्न
पोस्ट/पेज डुप्लीकेटर
