Anchor Positioning

အခြေခံ သဘောတရား

အဓိက အစိတ်အပိုင်း (၂) ခု ပါဝင်ပါတယ်။

Anchor Element: မှီခိုအားထားရမယ့် တိုင် (ဥပမာ - Button)။ သူ့ကို anchor-name နာမည်တစ်ခု ပေးထားရပါမယ်။
Positioned Element: သွားကပ်မယ့် ကောင် (ဥပမာ - Tooltip)။ သူကနေပြီး position-anchor နဲ့ ဟိုဘက်က နာမည်ကို လှမ်းချိတ်ရပါမယ်။

Code ရေးသားပုံ ဥပမာ

/* ၁။ Anchor (မှီခိုရမည့် Button) */
.trigger-btn {
  anchor-name: --my-anchor; /* နာမည်တစ်ခု ပေးလိုက်တယ် */
}

/* ၂။ Positioned Element (သွားကပ်မည့် Tooltip) */
.tooltip {
  position: absolute;
  position-anchor: --my-anchor; /* Button ရဲ့ နာမည်ကို လှမ်းချိတ်လိုက်တယ် */

  /* Button ရဲ့ အပေါ် (top) မှာ ကပ်မယ် */
  bottom: anchor(top);

  /* Button ရဲ့ အလယ် (center) နဲ့ အချိုးကျ ညှိမယ် */
  left: anchor(center);
  transform: translateX(-50%);
}

Fallback (နေရာမလောက်ရင် ဘယ်လိုလုပ်မလဲ?)

Screen ရဲ့ အဆုံးကို ရောက်နေလို့ Tooltip ပြစရာ နေရာမရှိတော့ဘူးဆိုရင်၊ အလိုအလျောက် အောက်ဘက်ကို ပြောင်းပြဖို့ (နေရာရွှေ့ဖို့) @position-try ကို အသုံးပြုနိုင်ပါတယ်။

.tooltip {
  /* ပုံမှန်ဆိုရင် အပေါ်မှာ ပြမယ်၊ နေရာမလောက်ရင် အောက်ဘက်ကို လှန်ချပြီး (flip-block) ပြမယ် */
  position-try-fallbacks: flip-block;
}