Skip to content

Anchor Positioning

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

Anchor Element: မှီခိုအားထားရမယ့် တိုင် (ဥပမာ - Button)။ anchor-name ပေးရမယ်။
Positioned Element: ကပ်မယ့် ကောင် (ဥပမာ - Tooltip)။ position-anchor နဲ့ ချိတ်ရမယ်။

Code ဥပမာ

/* 1. Anchor (Button) */
.trigger-btn {
  anchor-name: --my-anchor;
}

/* 2. 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;
}