ऐंकर पोज़िशन

टूलटिप या ड्रॉप-डाउन मेन्यू को पेज पर किसी दूसरे एलिमेंट के हिसाब से सेट किया जाता है. इस इफ़ेक्ट को पाने के लिए, अब तक ऐब्सलूट पोज़िशनिंग का इस्तेमाल किया जाता रहा है. हालांकि, ज़्यादा मुश्किल ज़रूरतों के लिए, JavaScript का इस्तेमाल करके आइटम को पोज़िशन किया जाता रहा है.

सीएसएस ऐंकर पोज़िशनिंग की मदद से, किसी एलिमेंट को दूसरे एलिमेंट के हिसाब से पोज़िशन किया जा सकता है.

टेदरिंग एलिमेंट

किसी एलिमेंट को ऐंकर बनाने के लिए, उसे ऐसी स्ट्रिंग की anchor-name वैल्यू दें जो दो डैश से शुरू होती हो. यह वह आइडेंटिफ़ायर है जिसका इस्तेमाल करके, पोज़िशन किए गए एलिमेंट को उसका ऐंकर मिलेगा. इसलिए, इसे ऐसा नाम दें जिससे पता चले कि यह किस बारे में है. अगर किसी एलिमेंट का इस्तेमाल अलग-अलग तरीकों से ऐंकर के तौर पर किया जाएगा, तो उसे एक से ज़्यादा ऐंकर नाम भी दिए जा सकते हैं.

आपको पोज़िशन किए गए एलिमेंट पर कुछ प्रॉपर्टी सेट करनी होंगी, ताकि उसे बांधा जा सके. सबसे पहले, आपको एलिमेंट को दस्तावेज़ के फ़्लो से बाहर निकालना होगा, ताकि वह फ़्लोट हो सके. इसके लिए, position: absolute या position: fixed सेट करें.

इसके बाद, आपको यह सेट करना होगा कि आपको किस ऐंकर से जोड़ना है. इसके लिए, ऐंकर पर सेट किए गए ऐंकर के नाम को position-anchor पर सेट करें.

आखिर में, आपको ऐंकर की पोज़िशन सेट करनी होगी. इस मॉड्यूल में, आपको position-area के बारे में ज़्यादा जानकारी मिलेगी.

#anchor {
   anchor-name: --my-anchor;
}

#positionedElement {
     position: absolute;
     position-anchor: --my-anchor;
     position-area: end;
}

इंप्लिसिट टेथर

पॉपओवर को अटैच करना और भी आसान है. popovertarget वाले बटन का इस्तेमाल करके या showPopover({source}) के साथ source सेट करके पॉपओवर खोलने पर, पॉपओवर में "इंप्लिसिट ऐंकर" पहले से सेट होता है. डिफ़ॉल्ट रूप से, position: fixed के साथ पॉपओवर पहले से ही फ़्लोट हो रहा होता है. इसलिए, पॉपओवर को पोज़िशन करने के लिए, आपको सिर्फ़ पोज़िशन सेट करनी होती है.

#anchor{}

#positionedElement {
  position-area: end;
  margin: unset;
}

संभावित ऐंकर तय करना

ऐंकर पोज़िशनिंग को किसी कॉम्पोनेंट के हिस्से के तौर पर लागू किया जा सकता है, ताकि ड्रॉप-डाउन मेन्यू जैसे पैटर्न का इस्तेमाल कई जगहों पर किया जा सके. अगर एक ही anchor-name का इस्तेमाल कई बार किया जा रहा है, तो यह कैसे पक्का किया जाता है कि हर पोज़िशन किए गए एलिमेंट को सही ऐंकर मिल रहा है?

JavaScript के समाधानों में, हर ऐंकर में यूनीक आईडी जोड़ना शामिल है. इसके बाद, उस आईडी को पोज़िशन किए गए एलिमेंट से रेफ़र करना होता है. यह तरीका मुश्किल है. सीएसएस में, anchor-scope का इस्तेमाल करके इसे आसानी से हल किया जा सकता है.

anchor-scope प्रॉपर्टी सेट करती है कि कौनसे ऐंकर नामों का मिलान सिर्फ़ किसी एलिमेंट और उसके डिसेंडेंट के बीच किया जाएगा. यह एक या उससे ज़्यादा ऐंकर नामों की सूची या all कीवर्ड को स्वीकार करता है, ताकि तय किए गए सभी ऐंकर नामों के स्कोप को सीमित किया जा सके.

anchor-scope को, पोज़िशन किए गए एलिमेंट और ऐंकर एलिमेंट, दोनों के पूर्वज में जोड़ा जाता है. साथ ही, यह पक्का किया जाता है कि उसमें एक ही नाम वाले अन्य ऐंकर एलिमेंट मौजूद न हों. अक्सर, यह जानकारी रीयूज़ किए जा सकने वाले कॉम्पोनेंट के रूट पर होती है.

यहां दिए गए उदाहरण में दिखाया गया है कि एक ही anchor-name वाले बार-बार इस्तेमाल किए गए एलिमेंट पर anchor-scope लागू करने से क्या अंतर पड़ता है. इस उदाहरण में, सभी <img> एलिमेंट और इमेज बैनर, --image ऐंकर के नाम का रेफ़रंस देते हैं. जब anchor-scope को <li> एलिमेंट पर लागू किया जाता है, तो position-anchor: --image सिर्फ़ उसी <li> एलिमेंट में मौजूद <img> एलिमेंट से मैच करेगा जिसमें बैनर मौजूद है. ऐसा न होने पर, यह रेंडर किए गए आखिरी <img> से मैच करेगा.

स्टिकर दिखने की जगह

आपने एलिमेंट को ऐंकर से जोड़ दिया है. अब इसे अपनी पसंद के मुताबिक सेट करने का समय है. ऐंकर पोज़िशनिंग के लिए, पोज़िशनिंग के दो तरीके उपलब्ध हैं – position-area और anchor() फ़ंक्शन.

position-area

position-area प्रॉपर्टी की मदद से, एक या दो कीवर्ड तय करके, किसी एलिमेंट को ऐंकर के आस-पास रखा जा सकता है. इसमें इस्तेमाल के कई सामान्य उदाहरण शामिल हैं. इसलिए, अक्सर इसे शुरुआत करने के लिए एक अच्छा विकल्प माना जाता है.

position-area के काम करने का तरीका

position-area, एंकर और पोज़िशन किए गए एलिमेंट के ओरिजनल कंटेनिंग ब्लॉक के किनारों से जनरेट किए गए किसी एरिया में, पोज़िशन किए गए एलिमेंट के लिए नया कंटेनिंग ब्लॉक बनाकर काम करता है.

position-area के लिए कई कीवर्ड उपलब्ध हैं. हालांकि, इन्हें कुछ कैटगरी में बांटा जा सकता है, ताकि इन्हें आसानी से समझा जा सके. सिंटैक्स के बारे में जानने के लिए, Anchor-tool.com एक बेहतरीन टूल है.

फ़िज़िकल कीवर्ड

top, left, bottom, right, और center जैसे फ़िज़िकल कीवर्ड इस्तेमाल किए जा सकते हैं. उदाहरण के लिए, position-area: top right से, पोज़िशन किए गए एलिमेंट को ऐंकर के ऊपर और दाईं ओर रखा जाएगा. इन कीवर्ड के फ़िज़िकल ऐक्सिस के बराबर कीवर्ड भी होते हैं: y-start, x-start, y-end, और x-end.

लॉजिकल कीवर्ड

लॉजिकल कीवर्ड, block-start, block-end, inline-start, और inline-end का भी इस्तेमाल किया जा सकता है. उदाहरण के लिए, position-area: block-end inline-start से, अंग्रेज़ी जैसी भाषाओं में, पोज़िशन किए गए एलिमेंट को ऐंकर के नीचे और बाईं ओर रखा जाएगा. इसके अलावा, दस्तावेज़ के राइटिंग मोड में, ब्लॉक ऐक्सिस पर ऐंकर के बाद और इनलाइन ऐक्सिस पर ऐंकर से पहले रखा जाएगा. center को लॉजिकल कीवर्ड के साथ भी इस्तेमाल किया जा सकता है.

अगर लॉजिकल कीवर्ड तय किए जा रहे हैं, तो ऐक्सिस को भी हटाया जा सकता है. इसके लिए, ब्लॉक ऐक्सिस को पहले और इनलाइन ऐक्सिस को दूसरे नंबर पर रखें. position-area: start end, position-area: block-start inline-end या position-area: inline-end block-start के बराबर है.

एक से ज़्यादा ग्रिड एरिया में फैला हुआ

अब तक, आपने देखा होगा कि इन विकल्पों की मदद से, सिर्फ़ एक ग्रिड स्पेस में एलिमेंट को पोज़िशन किया जा सकता है. फ़िजिकल या लॉजिकल प्रॉपर्टी में span प्रीफ़िक्स जोड़ने से, आस-पास के सेंटर ग्रिड स्पेस को जोड़ा जाता है. position-area: span-top right को ऐंकर के दाईं ओर और ऐंकर के सबसे नीचे से लेकर, पोज़िशन किए गए एलिमेंट के ओरिजनल कंटेनिंग ब्लॉक के सबसे ऊपर तक रखा जाएगा.

ड्रॉप-डाउन मेन्यू के लिए, आम तौर पर इस्तेमाल की जाने वाली पोज़िशन-एरिया position-area: block-end span-inline-end है.

span-all कीवर्ड, तीन लाइनों या कॉलम में फैला हुआ है.

सिंगल कीवर्ड

सिर्फ़ एक कीवर्ड सेट करने पर, दूसरा ऐक्सिस अपने-आप सेट हो जाता है. यह सुविधा, आपकी उम्मीद के मुताबिक काम करती है. हालांकि, यह कैसे काम करती है, यह जानना आपके लिए फ़ायदेमंद हो सकता है.

अगर दिया गया कीवर्ड अपने ऐक्सिस के बारे में साफ़ तौर पर बताता है, तो दूसरे ऐक्सिस की गिनती span-all के तौर पर की जाती है. इसका मतलब है कि position-area: bottom, position-area: bottom span-all के बराबर है. साथ ही, पोज़िशन किए गए एलिमेंट को ऐंकर के नीचे रखा जाएगा और उसके पास कंटेनिंग ब्लॉक की पूरी चौड़ाई उपलब्ध होगी.

दूसरी ओर, अगर कीवर्ड से किसी ऐक्सिस के बारे में साफ़ तौर पर पता नहीं चलता है, तो उसे दोहराया जाता है. position-area: start, start start के बराबर होता है. इसे बाएं से दाएं लिखी जाने वाली भाषाओं में, ऐंकर के सबसे ऊपर बाईं ओर रखा जाता है.

anchor() फ़ंक्शन

बेहतर इस्तेमाल के लिए, position-area आपकी ज़रूरतों को पूरा नहीं कर सकता. anchor() फ़ंक्शन की मदद से, किसी दूसरे एलिमेंट की पोज़िशन के आधार पर, अलग-अलग इंसर्ट प्रॉपर्टी सेट की जा सकती हैं. इससे सीएसएस की लंबाई तय होती है. इसका मतलब है कि इसका इस्तेमाल कैलकुलेशन में और सीएसएस के अन्य फ़ंक्शन के साथ किया जा सकता है. इसके अलावा, अलग-अलग साइड को अलग-अलग ऐंकर से भी जोड़ा जा सकता है.

anchor() फ़ंक्शन में ऐंकर का नाम और ऐंकर की साइड का इस्तेमाल किया जाता है. अगर आपके एलिमेंट में डिफ़ॉल्ट ऐंकर है, तो ऐंकर का नाम शामिल करने की ज़रूरत नहीं है. डिफ़ॉल्ट ऐंकर को position-anchor के साथ सेट किया जाता है या यह अपने-आप सेट हो जाता है. उदाहरण के लिए, पॉपओवर के साथ.

.positionedElement {
  block-start: anchor(--my-anchor start);
  /*  OR  */
  position-anchor: --my-anchor;
  block-start: anchor(start);
}

फ़ॉलबैक वैल्यू

अगर anchor() फ़ंक्शन के लिए ऐंकर नहीं मिलता है, तो पूरी घोषणा अमान्य हो जाएगी. ऐसा तब हो सकता है, जब एंकर को पोज़िशन किए गए एलिमेंट के बाद रेंडर किया गया हो या anchor-name से मेल खाने वाला कोई एलिमेंट न हो. इसके लिए, फ़ॉलबैक की अवधि या प्रतिशत सेट किया जा सकता है.

.positionedElement {
   block-start: anchor(--my-anchor, 100px)
}

ऊपर दिए गए उदाहरण में, पोज़िशन किए गए एलिमेंट की बाईं ओर की वैल्यू को --focused-anchor पर ऐंकर किया गया है. हालांकि, anchor-name सिर्फ़ तब मौजूद होता है, जब पहले बटन पर कर्सर घुमाया जाता है या उस पर फ़ोकस किया जाता है. anchor() फ़ंक्शन से लंबाई का पता चलता है. इसलिए, फ़ॉलबैक के तौर पर किसी अन्य ऐंकर का इस्तेमाल किया जा सकता है. अगर हमने फ़ॉलबैक नहीं दिया है, तो पोज़िशन किए गए एलिमेंट को पोज़िशन नहीं किया जाएगा.

ऐंकर साइड कीवर्ड

ऐंकर साइड वैल्यू से यह तय होता है कि ऐंकर के किस किनारे को अलाइन करना है. position-area की तरह ही, ऐंकर साइड वैल्यू के लिए कई तरह के सिंटैक्स इस्तेमाल किए जा सकते हैं.

इस उदाहरण में दिखाया गया है कि प्रतिशत वैल्यू, तय किए गए ऐक्सिस पर हमेशा शुरू से आखिर तक कैसे जाती है:

anchor() का इस्तेमाल करना

anchor() एक लंबाई है, इसलिए यह बहुत लचीली होती है. max() और calc() जैसे सीएसएस फ़ंक्शन का इस्तेमाल करके, वैल्यू में बदलाव किया जा सकता है.

हालांकि, इसकी एक सीमा यह है कि सिर्फ़ इंसर्ट की गई प्रॉपर्टी पर anchor() फ़ंक्शन का इस्तेमाल किया जा सकता है.

ऊपर दिए गए उदाहरण में, खुले हुए 'जानकारी' पैनल के पीछे एक बैकग्राउंड जोड़ा गया है. जब कोई दूसरा पैनल खोला जाता है, तो यह बैकग्राउंड आसानी से ऐनिमेट होता है. साथ ही, जब किसी 'जानकारी' पैनल पर कर्सर घुमाया जाता है, तो यह बैकग्राउंड स्ट्रेच हो जाता है. इसके लिए, यह min() का इस्तेमाल करके, दो ऐंकर के बीच की छोटी दूरी को चुनता है.

#indicator{
/*  Use the smaller of the 2 values:  */
  inset-block-start: min(
/*   1. The start side of the default anchor, which is the open `<details>` element  */
    anchor(start),
/*   2. The start side of the hovered `<details>` element.    */
    anchor(--hovered start,
/*     If no `<details>` element is hovered, this falls back to infinity px, so that the other value is smaller, and therefore used.   */
       var(calc(1px * infinity)))
  );
}

इस उदाहरण में, खुले हुए पैनल के चारों ओर इनलाइन स्पेस जोड़ने के लिए calc() का भी इस्तेमाल किया गया है.

ऐंकर के साइज़ का इस्तेमाल करके

anchor-size() फ़ंक्शन का इस्तेमाल करके, एंकर के डाइमेंशन का इस्तेमाल, पोज़िशन किए गए एलिमेंट के साइज़, पोज़िशन या मार्जिन के लिए भी किया जा सकता है.

anchor-size(), ऐंकर का नाम लेता है या डिफ़ॉल्ट ऐंकर का इस्तेमाल करता है. डिफ़ॉल्ट रूप से, यह उस ऐक्सिस पर ऐंकर के साइज़ का इस्तेमाल करेगा जिस पर इसका इस्तेमाल किया जा रहा है. इसलिए, width: anchor-size() ऐंकर की चौड़ाई दिखाएगा. फ़िज़िकल कीवर्ड width और height या लॉजिकल कीवर्ड block, inline, self-block, और self-inline का इस्तेमाल करके, यह तय किया जा सकता है कि आपको कौनसी लंबाई चाहिए. इसके बाद, दूसरे ऐक्सिस का इस्तेमाल किया जा सकता है.

ओवरफ़्लो को मैनेज करना

आपने ड्रॉप-डाउन मेन्यू कॉम्पोनेंट बनाया है. साथ ही, ऐंकर पोज़िशनिंग का इस्तेमाल करके ड्रॉप-डाउन मेन्यू को उस जगह पर रखा है जहां आपको उसे रखना है. हालांकि, बाद में आपने मेन्यू को स्क्रीन की दूसरी तरफ़ ले जाकर रख दिया या उपयोगकर्ता मेन्यू के लिए इसका इस्तेमाल किया. साथ ही, उपयोगकर्ता का नाम बहुत लंबा है. अचानक, ड्रॉप-डाउन स्क्रीन से हट जाता है. अब क्या करें?

सीएसएस ऐंकर पोज़िशनिंग में एक बिल्ट-इन सिस्टम होता है. इसकी मदद से, पोज़िशन किए गए एलिमेंट के कंटेनिंग ब्लॉक से बाहर होने पर, फ़ॉलबैक का एक मज़बूत सेट तुरंत बनाया जा सकता है.

अन्य विकल्प

position-try-fallbacks नियम, फ़ॉलबैक विकल्पों की सूची लेता है. जब डिफ़ॉल्ट पोज़िशन में कॉन्टेंट ज़्यादा हो जाता है, तो हर विकल्प को क्रम से आज़माया जाएगा. ऐसा तब तक किया जाएगा, जब तक कोई ऐसी पोज़िशन न मिल जाए जिसमें कॉन्टेंट ज़्यादा न हो.

फ़ॉलबैक विकल्प के तौर पर, किसी भी position-area वैल्यू का इस्तेमाल किया जा सकता है. इस उदाहरण में, अंग्रेज़ी जैसी भाषाओं में बाएं से दाएं लिखने के मोड में, पोज़िशन की गई एलिमेंट को ऐंकर के सबसे नीचे पोज़िशन करने की कोशिश की जाएगी. यह एलिमेंट, बीच वाले और दाएं कॉलम में फैला होगा. अगर यह ओवरफ़्लो होता है, तो इसे ऐंकर के सबसे नीचे, बाईं और बीच वाली कॉलम में दिखाने की कोशिश की जाएगी. अगर वह भी ओवरफ़्लो हो जाता है, तो पोज़िशन डिफ़ॉल्ट पोज़िशन पर वापस आ जाएगी. भले ही, वह ओवरफ़्लो हो जाए.

.positioned-element {
  position-area: block-end span-inline-end;
  position-try-fallbacks: block-end span-inline-start;
}

ऐसे कई flip- कीवर्ड भी हैं जो सामान्य फ़ॉलबैक मामलों को हैंडल करते हैं. flip-block और flip-inline, एलिमेंट को ब्लॉक और इनलाइन ऐक्सिस पर फ़्लिप करने की कोशिश करते हैं. दोनों ऐक्सिस को फ़्लिप करने के लिए, इन्हें flip-block flip-inline के साथ भी इस्तेमाल किया जा सकता है. flip-start वैल्यू, पोज़िशन किए गए एलिमेंट को ऐंकर के शुरुआती और आखिरी कोनों से होकर गुज़रने वाली डायगोनल लाइन पर फ़्लिप करती है.

आपके पास @position-try का इस्तेमाल करके, कस्टम फ़ॉलबैक विकल्प बनाने का भी विकल्प होता है. इससे मार्जिन और अलाइनमेंट सेट किया जा सकता है. साथ ही, ऐंकर में भी बदलाव किया जा सकता है.

@position-try --menu-below {
  position-area: bottom span-right;
  margin-top: 1em;
}

#positioned-element {
  position-try: --menu-below;
}

वैरिएंट बनाने के लिए, @position-try फ़ॉलबैक विकल्पों में flip-block और flip-inline जोड़े जा सकते हैं.

#positioned-element {
  position-try: --menu-below, flip-inline --menu-below;
}

ऊपर दिए गए उदाहरण में, ब्राउज़र इन चरणों को पूरा करता है. जैसे ही उसे ऐसा समाधान मिल जाता है जिसमें ओवरफ़्लो नहीं होता है, वह रुक जाता है.

1. इस एलिमेंट को ऐंकर के सबसे नीचे दाईं ओर position-area: end के साथ रखा गया है.
2. अगर ऐसा नहीं होता है, तो एलिमेंट को --bottom-span-right नाम के कस्टम फ़ॉलबैक विकल्प के साथ रखा जाता है. इससे एलिमेंट को position-area: bottom span-right के साथ रखा जाता है. साथ ही, इसके नीचे एक और मार्जिन जोड़ा जाता है.
3. अगर ऐसा होता है, तो एलिमेंट को flip-inline --bottom-span-right के साथ रखा जाता है. यह कस्टम फ़ॉलबैक विकल्प को flip-inline के साथ जोड़ता है. flip-inline, असल में position-area: bottom span-left होता है.
4. अगर ऐसा नहीं होता है, तो एलिमेंट को --use-alternate कस्टम फ़ॉलबैक विकल्प का इस्तेमाल करके रखा जाता है. इससे एलिमेंट को किसी दूसरे ऐंकर के नीचे रखा जाता है.
5. अगर ऐसा होता है, तो एलिमेंट अपनी मूल जगह पर वापस आ जाता है. साथ ही, position-area: end दिखता है. भले ही, यह पता हो कि यह ओवरफ़्लो हो रहा है.

फ़ॉलबैक ऑर्डर

डिफ़ॉल्ट रूप से, शुरुआती पोज़िशन के तय सीमा से ज़्यादा होने पर, ब्राउज़र position-try-fallbacks में मौजूद हर विकल्प को तब तक आज़माएगा, जब तक उसे ऐसी पोज़िशन नहीं मिल जाती जो तय सीमा से ज़्यादा न हो. position-try-order का इस्तेमाल करके, इस व्यवहार को बदला जा सकता है. इससे हर फ़ॉलबैक विकल्प को टेस्ट किया जा सकता है. साथ ही, उस विकल्प का इस्तेमाल किया जा सकता है जिसमें तय किए गए ऐक्सिस पर सबसे ज़्यादा जगह हो.

लॉजिकल कीवर्ड most-block-size और most-inline-size या फ़िज़िकल कीवर्ड most-height और most-width का इस्तेमाल करके, ऐक्सिस तय किया जा सकता है.

position-try-order और position-try-fallbacks को position-try शॉर्टहैंड के साथ जोड़ा जा सकता है. हालांकि, ऐसा करते समय position-try को पहले रखना होगा.

स्क्रोल करना

जब कोई व्यक्ति स्क्रोल करता है, तो उसे उम्मीद होती है कि पेज आसानी से स्क्रोल हो. इसके लिए, ब्राउज़र में यह तय किया जाता है कि स्क्रोल करते समय ऐंकर पोज़िशनिंग का इस्तेमाल कैसे किया जा सकता है.

किसी पोज़िशन किए गए एलिमेंट को अलग-अलग स्क्रोल कंटेनर में मौजूद ऐंकर से जोड़ा जा सकता है. हालांकि, एलिमेंट सिर्फ़ एक ऐंकर के स्क्रोल करने पर ही अपनी जगह बदलेगा. यह डिफ़ॉल्ट ऐंकर होगा. यह पॉपओवर से मिला ऐंकर या position-anchor की वैल्यू हो सकता है.

आपको दिखेगा कि ऐंकर के स्क्रोल होकर व्यू से बाहर चले जाने पर भी, पोज़िशन किया गया एलिमेंट दिखता रहता है. ऐंकर के छिपे होने पर, पोज़िशन किए गए एलिमेंट को छिपाने के लिए, position-visibility: anchors-visible सेट करें. यह सिर्फ़ तब लागू नहीं होता, जब ऐंकर को बहुत ज़्यादा स्क्रोल किया जाता है. यह तब भी लागू होता है, जब उसे किसी अन्य तरीके से छिपाया जाता है. उदाहरण के लिए, visibility: hidden का इस्तेमाल करके.

देखें कि आपको कितना समझ आया