ꯁꯤꯅꯥꯔꯤꯑꯣ ꯑꯁꯤ ꯆꯥꯎꯔꯥꯛꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯩ, ꯃꯁꯤ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯗꯦꯇꯥ ꯇꯦꯕꯜ ꯑꯃꯅꯤ꯫ ꯔꯣ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯦꯛꯁꯟ ꯃꯦꯅꯨ ꯑꯃꯥ ꯂꯩ, ꯑꯦꯗꯤꯠ, ꯗꯨꯞꯂꯤꯀꯦꯠ, ꯑꯃꯁꯨꯡ ꯗꯤꯂꯤꯠꯒꯨꯝꯕꯥ ꯑꯣꯄꯁꯟ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯄꯤꯀꯄꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯥ ꯂꯩ꯫ ꯑꯗꯣꯝꯅꯥ ꯃꯁꯤ ꯁꯥꯔꯤ, ꯃꯁꯤꯅꯥ ꯑꯥꯏꯁꯣꯂꯦꯁꯟꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯎꯕꯥ ꯐꯪꯏ, ꯑꯗꯨꯒꯥ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯃꯗꯨ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯗꯤꯚ ꯑꯗꯨꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯂꯒꯥ ꯄꯣꯠꯁꯤꯡ ꯑꯗꯨ ꯁꯣꯀꯍꯜꯂꯤ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯕꯥꯒ ꯑꯁꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯣꯗꯕꯦꯖ ꯑꯍꯨꯃꯗꯥ ꯎꯕꯥ ꯐꯪꯂꯦ: ꯀꯟꯇꯦꯅꯔ, ꯁ꯭ꯇꯦꯛ, ꯑꯃꯁꯨꯡ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ, ꯄꯨꯝꯅꯃꯛ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ꯫ ꯑꯗꯨꯕꯨ ꯕꯥꯒ ꯑꯁꯤꯗꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯃꯥꯟꯅꯩ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯅꯔꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯀ꯭ꯂꯤꯞ ꯇꯧꯏ꯫ ꯅꯠꯔꯒꯥ ꯃꯁꯤꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯣꯖꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯩꯒꯗꯕꯥ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯇꯨꯡꯗꯥ ꯎꯠꯂꯤ꯫ ꯅꯠꯠꯔꯒꯥ ꯌꯨꯖꯔꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ ꯐꯖꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯁꯤ ꯗ꯭ꯔꯥꯏꯚꯔ ꯑꯣꯏ꯫ ꯅꯍꯥꯛꯅꯥ z-index: 9999. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ, ꯑꯗꯨꯕꯨ ꯑꯇꯣꯞꯄꯥ ꯃꯇꯃꯗꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯀꯔꯤꯁꯨ ꯇꯧꯗꯦ꯫ ꯑꯗꯨꯒꯨꯝꯕꯥ ꯏꯅꯀꯟꯁꯤꯁ꯭ꯇꯦꯟꯁ ꯑꯗꯨꯅꯥ ꯍꯦꯟꯅꯥ ꯂꯨꯝꯅꯥ ꯂꯧꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯥ ꯊꯣꯛꯂꯤ ꯍꯥꯌꯕꯒꯤ ꯑꯍꯥꯅꯕꯥ ꯀ꯭ꯂꯨꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯍꯜꯂꯛꯂꯤꯕꯥ ꯑꯁꯤꯒꯤ ꯃꯔꯃꯗꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯍꯨꯝ ꯌꯥꯑꯣꯔꯤ, ꯑꯃꯁꯨꯡ ꯑꯌꯥꯝꯕꯥ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯑꯃꯃꯝ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯈꯉꯏ ꯑꯗꯨꯕꯨ ꯑꯍꯨꯝ ꯑꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯊꯦꯡꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯀꯔꯤ ꯑꯣꯏꯒꯅꯤ ꯍꯥꯌꯕꯁꯤꯗꯥ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯈꯟꯊꯗꯦ: ꯑꯣꯚꯔꯐ꯭ꯂꯣ, ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯛꯁꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯌꯥꯑꯣꯕꯥ꯫

ꯑꯍꯨꯝ ꯑꯁꯤꯅꯥ ꯀꯔꯝꯅꯥ ꯏꯟꯇꯔꯦꯛꯇ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯅꯍꯥꯛꯅꯥ ꯈꯪꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯐꯦꯏꯂꯔ ꯃꯣꯗꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯟꯗꯝ ꯑꯣꯏꯅꯥ ꯐꯥꯎꯕꯥ ꯂꯦꯄꯈꯤ꯫ ꯇꯁꯦꯡꯕꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯄ꯭ꯔꯤꯗꯤꯛꯇꯦꯕꯜ ꯑꯣꯏꯔꯀꯏ꯫ ꯃꯁꯤ ꯇꯁꯦꯡꯅꯥ ꯊꯣꯀꯍꯜꯂꯤꯕꯥ ꯋꯥꯐꯝ ꯑꯍꯨꯝ ꯑꯁꯤ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯄꯣꯠꯂꯝ ꯈꯨꯗꯤꯡꯃꯛ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯗꯥ ꯌꯦꯡꯁꯤ꯫ ꯑꯣꯚꯔꯐ꯭ꯂꯣꯒꯤ ꯁꯃꯁ꯭ꯌꯥ ꯑꯁꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯑꯣꯚꯔꯐ꯭ꯂꯣ: ꯂꯣꯠꯁꯤꯜꯂꯕꯥ, ꯑꯣꯚꯔꯐ꯭ꯂꯣ: ꯁ꯭ꯛꯔꯣꯜ, ꯅꯠꯠꯔꯒꯥ ꯑꯣꯚꯔꯐ꯭ꯂꯣ: ꯑꯣꯇꯣ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯕ꯭ꯔꯥꯎꯖꯔ ꯑꯗꯨꯅꯥ ꯃꯄꯨꯡꯐꯥꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯔꯕꯥ ꯇꯨꯡꯏꯅꯕꯁꯤꯡ ꯌꯥꯎꯅꯥ, ꯃꯗꯨꯒꯤ ꯉꯃꯈꯩꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯂꯩꯕꯥ ꯄꯣꯠꯁꯛ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀ꯭ꯂꯤꯞ ꯇꯧꯒꯅꯤ꯫ .ꯁ꯭ꯛꯔꯣꯜ-ꯀꯟꯇꯦꯅꯔ { . ꯑꯣꯚꯔꯐ꯭ꯂꯣ: ꯑꯣꯇꯣ; ꯑꯋꯥꯡꯕꯥ: ꯳꯰꯰px; /* ꯃꯁꯤꯅꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯀ꯭ꯂꯤꯞ ꯇꯧꯒꯅꯤ, ꯐꯨꯜ ꯁ꯭ꯇꯣꯞ */ }

.ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ { . ꯄꯣꯖꯤꯁꯟ: ꯑꯦꯕꯁꯣꯜꯌꯨꯇꯦꯗ; /* ꯃꯔꯨ ꯑꯣꯏꯗꯦ -- ꯍꯧꯖꯤꯀꯁꯨ .scroll-containerꯅꯥ ꯀ꯭ꯂꯤꯞ ꯇꯧꯔꯤ */ }

ꯃꯗꯨ ꯑꯩꯍꯥꯀꯄꯨ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯃꯁꯤꯗꯥ ꯂꯥꯟꯊꯦꯡꯅꯈꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯉꯀꯄꯥ ꯄꯣꯀꯍꯅꯈꯤ꯫ ꯑꯩꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯂꯧꯈꯤ: ꯑꯦꯕꯁꯣꯜꯌꯨꯇꯦꯗꯅꯥ ꯏꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯀ꯭ꯂꯤꯄꯤꯡꯗꯒꯤ ꯂꯥꯄꯊꯣꯀꯍꯅꯒꯅꯤ꯫ ꯃꯁꯤ ꯇꯧꯗꯦ꯫ ꯆꯠꯅꯕꯤꯗꯥ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯔꯕꯥ ꯃꯦꯅꯨ ꯑꯃꯥ ꯅꯟ-ꯚꯤꯖꯤꯕꯜ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯚꯦꯜꯌꯨ ꯂꯩꯕꯥ ꯑꯦꯟꯁꯦꯁ꯭ꯇꯔ ꯑꯃꯍꯦꯛꯇꯅꯥ ꯀꯀꯊꯕꯥ ꯌꯥꯏ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯦꯟꯁꯦꯁ꯭ꯇꯔ ꯑꯗꯨ ꯃꯦꯅꯨꯒꯤ ꯌꯥꯑꯣꯕꯥ ꯕ꯭ꯂꯣꯛ ꯑꯗꯨ ꯑꯣꯏꯗ꯭ꯔꯕꯁꯨ꯫ ꯀ꯭ꯂꯤꯄꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯁꯤꯁ꯭ꯇꯦꯃꯁꯤꯡꯅꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯑꯗꯣꯝꯅꯥ ꯑꯅꯤꯃꯛ ꯈꯉꯗ꯭ꯔꯤꯐꯥꯑꯣꯕꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯔꯦꯟꯗꯝ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯊꯦꯡꯅꯔꯀꯄꯥ ꯈꯛꯇꯅꯤ꯫

ꯃꯈꯥꯗꯥ createPortal ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ React ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ:

'ꯔꯤꯑꯦꯛꯇ-ꯗꯣꯝ'ꯗꯒꯤ { createPortal } ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ; import { useState, useEffect, useRef } 'ꯔꯤꯑꯦꯛꯇ'ꯗꯒꯤ;

function Dropdown({ anchorRef, isOpen, ꯑꯉꯥꯡꯁꯤꯡ }) { const [ꯄꯣꯖꯤꯁꯟ, setPosition] = useState({ ꯃꯊꯛꯇꯥ: 0, ꯂꯦꯃꯍꯧꯔꯤꯕꯥ: 0 });

ꯌꯨꯖꯏꯐꯦꯛꯇ(() => { ꯀꯔꯤꯒꯨꯝꯕꯥ (isOpen && anchorRef.current) { const rect = anchorRef.current.getBoundingClientRect(); ꯁꯦꯇꯄꯣꯖꯤꯁꯟ({ ꯃꯊꯛꯇꯥ: rect.bottom + ꯎꯏꯟꯗꯣ.ꯁ꯭ꯛꯔꯣꯜY, ꯂꯦꯃꯍꯧꯔꯤꯕꯥ: ꯔꯦꯛꯇ.ꯂꯦꯐꯠ + ꯎꯏꯟꯗꯣ.ꯁ꯭ꯛꯔꯣꯜꯑꯦꯛꯁ, }); } }, [isOpen, ꯑꯦꯉ꯭ꯀꯔꯔꯦꯐ]);

ꯀꯔꯤꯒꯨꯝꯕꯥ (!isOpen)ꯅꯥ ꯅꯜ ꯔꯤꯇꯔꯟ ꯇꯧꯔꯕꯗꯤ;

ꯔꯤꯇꯔꯟ ꯇꯧꯕꯥ ꯄꯣꯔꯇꯦꯜ(

{ꯑꯉꯥꯡꯁꯤꯡ}
, ꯴. ꯗꯣꯀꯨꯃꯦꯟꯇ.ꯕꯣꯗꯤ ); }

ꯑꯃꯁꯨꯡ, ꯇꯁꯦꯡꯕꯗꯤ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯑꯁꯤ ꯌꯦꯡꯁꯤꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯊꯛꯇꯥ ꯊꯣꯀꯄꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯀꯤꯕꯣꯔꯗ-ꯔꯤꯆ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯏꯒꯗꯕꯅꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯣꯀꯁ ꯑꯣꯔꯗꯔ ꯑꯗꯨ ꯃꯍꯧꯁꯥꯅꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯗꯥ ꯆꯪꯁꯤꯜꯂꯛꯠꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯀꯣꯗ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯦꯅꯦꯖ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤꯕꯨ ꯊꯥꯗꯣꯛꯅꯕꯒꯤ ꯄꯥꯝꯕꯩ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯏꯟꯇꯔꯦꯛꯇꯤꯕ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯊꯛꯇꯥ ꯐꯃꯗꯦ ꯍꯥꯌꯕꯁꯤꯁꯨ ꯌꯦꯡꯁꯤꯅꯕꯥ ꯌꯥꯏ꯫ ꯑꯗꯨꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯑꯗꯣꯃꯕꯨ ꯀꯤꯕꯣꯔꯗ ꯇꯦꯁ꯭ꯇꯤꯡꯗꯥ ꯆꯦꯜꯂꯤ꯫ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ: ꯑꯩꯅꯥ ꯈꯜꯂꯤꯕꯥ ꯃꯐꯝ ꯑꯁꯤ ꯍꯦꯗꯤꯡ ꯇꯧꯔꯤ꯫ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤ ꯍꯧꯖꯤꯛ ꯑꯩꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯃꯥꯏꯀꯩꯅꯤ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯌꯦꯡꯂꯨꯔꯒꯗꯤ ꯁ꯭ꯄꯦꯛ ꯑꯁꯤ ꯀꯌꯥ ꯌꯥꯝꯅꯥ ꯇꯁꯦꯡꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯑꯩꯍꯥꯛ ꯁꯣꯌꯗꯅꯥ ꯈꯉꯂꯃꯗꯦ꯫ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯒꯥ ꯃꯁꯤꯒꯤ ꯇ꯭ꯔꯤꯒꯔꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯃꯔꯤ ꯑꯗꯨ ꯍꯀꯊꯦꯡꯅꯅꯥ CSSꯗꯥ ꯂꯥꯎꯊꯣꯀꯄꯥ ꯌꯥꯍꯜꯂꯤ, ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯥꯎꯖꯔꯅꯥ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯑꯗꯨ ꯍꯦꯟꯗꯜ ꯇꯧꯏ꯫ .ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ { . ꯑꯦꯉ꯭ꯀꯔ-ꯅꯦꯝ: --ꯑꯩꯒꯤ-ꯇ꯭ꯔꯤꯒꯔ; }

.ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ-ꯃꯦꯅꯨ { . ꯄꯣꯖꯤꯁꯟ: ꯑꯦꯕꯁꯣꯜꯌꯨꯇꯦꯗ; ꯄꯣꯖꯤꯁꯟ-ꯑꯦꯉ꯭ꯀꯔ: --ꯑꯩꯒꯤ-ꯇ꯭ꯔꯤꯒꯔ; ꯃꯊꯛꯇꯥ: ꯑꯦꯉ꯭ꯀꯔ(ꯃꯈꯥꯗꯥ); ꯂꯦꯞꯇꯅꯥ: ꯑꯦꯉ꯭ꯀꯔ(ꯂꯦꯐꯠ); ꯄꯣꯖꯤꯁꯟ-ꯇ꯭ꯔꯥꯏ-ꯐꯣꯂꯕꯦꯀꯁꯤꯡ: ꯐ꯭ꯂꯤꯞ-ꯕ꯭ꯂꯣꯛ, ꯐ꯭ꯂꯤꯞ-ꯏꯅꯂꯥꯏꯟ; }

ꯄꯣꯖꯤꯁꯟ-ꯇ꯭ꯔꯥꯏ-ꯐꯣꯂꯕꯦꯀꯁ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤꯅꯥ ꯃꯁꯤꯕꯨ ꯃꯦꯅꯨꯑꯦꯜ ꯀꯦꯂꯀꯨꯂꯦꯁꯟ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯣꯏꯍꯜꯂꯤ꯫ ꯕ꯭ꯔꯥꯎꯖꯔꯅꯥ ꯊꯥꯗꯣꯛꯠꯔꯤꯉꯩ ꯃꯃꯥꯡꯗꯥ ꯑꯇꯣꯞꯄꯥ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇꯁꯤꯡ ꯍꯣꯠꯅꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯅꯥ ꯀꯀꯊꯠꯄꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯃꯊꯛꯇꯥ ꯐ꯭ꯂꯤꯞ ꯇꯧꯏ꯫ ꯀ꯭ꯔꯣꯃꯤꯌꯃꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯥ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯠ ꯑꯁꯤ ꯁꯣꯂꯤꯗ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯁꯐꯔꯤꯗꯥ ꯍꯦꯅꯒꯠꯂꯛꯂꯤ꯫ ꯐꯥꯏꯔꯐꯛꯁꯅꯥ ꯄꯣꯂꯤꯐꯤꯜ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ @oddbird/css-anchor-positioning ꯄꯦꯀꯦꯖ ꯑꯁꯤꯅꯥ ꯀꯣꯔ ꯁ꯭ꯄꯦꯛ ꯑꯁꯤ ꯀꯣꯅꯁꯤꯜꯂꯤ꯫ ꯑꯩꯅꯥ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯦꯖ ꯀꯦꯁꯁꯤꯡ ꯍꯤꯠ ꯇꯧꯈ꯭ꯔꯦ ꯃꯗꯨꯗꯤ ꯑꯩꯅꯥ ꯊꯥꯖꯗꯕꯥ ꯐꯣꯂꯕꯦꯀꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯈꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯁꯤꯕꯨ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁꯤꯚ ꯑꯦꯅꯍꯥꯟꯁꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯕꯤꯌꯨ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯕꯤꯌꯨ꯫ꯐꯥꯏꯔꯐꯛꯁꯀꯤꯗꯃꯛ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯐꯣꯂꯕꯦꯛ꯫ ꯋꯥꯍꯪ ꯑꯃꯗꯥ ꯍꯥꯌꯔꯕꯗꯥ, ꯊꯥꯖꯅꯤꯡꯉꯥꯏ ꯑꯣꯏꯕꯥ ꯑꯗꯨꯕꯨ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯌꯨꯅꯤꯚꯔꯁꯦꯜ ꯑꯣꯏꯗ꯭ꯔꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯇꯥꯔꯒꯦꯠ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯗꯥ ꯇꯦꯁ꯭ꯠ ꯇꯧ꯫ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯍꯥꯌꯔꯕꯗꯥ, ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯔꯤꯂꯦꯁꯅꯁꯤꯞ ꯑꯃꯥ ꯂꯥꯎꯊꯣꯀꯄꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯇ꯭ꯔꯤꯗꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯍꯥꯌꯕꯥ ꯉꯃꯗꯦ꯫ ꯑꯦꯔꯤꯌꯥ-ꯀꯟꯠꯔꯣꯂꯁꯤꯡ, ꯑꯦꯔꯤꯌꯥ-ꯑꯦꯛꯁꯄꯥꯟꯗꯦꯗ, ꯑꯦꯔꯤꯌꯥ-ꯍꯥꯁꯄꯣꯄꯞ — ꯑꯗꯨꯒꯨꯝꯕꯥ ꯁꯔꯨꯛ ꯑꯗꯨ ꯍꯧꯖꯤꯀꯁꯨ ꯅꯍꯥꯛꯀꯤ ꯃꯊꯛꯇꯥ ꯂꯩꯔꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯤꯛꯁ ꯑꯁꯤ ꯏꯂꯤꯃꯦꯟꯇ ꯑꯁꯤ ꯁꯨꯞꯅꯇꯒꯤ ꯆꯠꯊꯣꯛ-ꯆꯠꯁꯤꯟ ꯇꯧꯕꯅꯤ꯫ ꯄꯣꯔꯇꯦꯜ ꯑꯃꯗꯥ ꯌꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠ ꯀꯦꯂꯀꯨꯂꯦꯁꯟ ꯇꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ, ꯑꯩꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯍꯥꯅꯕꯗꯥ ꯋꯥꯍꯪ ꯑꯃꯥ ꯍꯪꯖꯩ: ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯁꯤ ꯇꯁꯦꯡꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯀꯟꯇꯦꯅꯔꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯔꯥ? ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯣꯏꯗ꯭ꯔꯕꯗꯤ, ꯃꯥꯔꯀꯑꯥꯞ ꯑꯗꯨ ꯑꯋꯥꯡꯕꯥ ꯊꯥꯛꯀꯤ ꯔꯦꯄꯔ ꯑꯃꯗꯥ ꯂꯧꯊꯣꯀꯄꯅꯥ ꯄ꯭ꯔꯣꯕ꯭ꯂꯦꯝ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯀꯣꯀꯍꯜꯂꯤ, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ ꯑꯃꯁꯨꯡ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠ ꯀꯦꯂꯀꯨꯂꯦꯁꯟ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯃꯁꯤ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯉꯃꯗꯦ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯕꯇꯟ ꯑꯃꯁꯨꯡ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯗꯨ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯑꯦꯅꯀꯦꯄꯁꯨꯜ ꯇꯧꯔꯕꯗꯤ, ꯑꯇꯣꯞꯄꯥ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯆꯪꯁꯤꯅꯕꯅꯥ API ꯄꯨꯝꯅꯃꯛ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯈꯅꯕꯅꯤ꯫ ꯑꯗꯨꯕꯨ ꯅꯍꯥꯛꯅꯥ ꯇꯧꯕꯥ ꯉꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ, ꯗꯤꯕꯒ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯄ꯭ꯔꯣꯕ꯭ꯂꯦꯝ ꯑꯁꯤ ꯈꯖꯤꯛꯇꯪ ꯂꯩꯇꯦ꯫ ꯃꯣꯗꯔꯟ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯍꯧꯖꯤꯛ ꯐꯥꯑꯣꯕꯥ ꯀꯔꯤ ꯁꯣꯜꯕ ꯇꯧꯗ꯭ꯔꯤꯕꯅꯣ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯅꯥ ꯌꯥꯝꯅꯥ ꯂꯥꯞꯅꯥ ꯂꯥꯛꯂꯦ, ꯑꯗꯨꯕꯨ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯋꯥꯈꯜ ꯋꯥꯍꯜꯂꯣꯏꯗꯕꯥ ꯃꯐꯃꯁꯤꯡ ꯍꯧꯖꯤꯀꯁꯨ ꯂꯩꯔꯤ꯫ ꯄꯣꯖꯤꯁꯟ: ꯐꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ ꯇꯧꯔꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯂꯩꯔꯤ꯫ ꯃꯁꯤ ꯁ꯭ꯄꯦꯛꯇꯥ ꯏꯟꯇꯦꯟꯁꯅꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯩ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯋꯥꯔꯀꯔꯎꯟꯗ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯦꯑꯥꯎꯠ ꯑꯗꯨ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯂꯣꯠꯄꯥ ꯑꯦꯅꯤꯃꯦꯁꯟ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯄꯣꯔꯇꯦꯂꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯗꯥ ꯍꯜꯂꯛꯂꯦ꯫ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯑꯁꯤ ꯊꯥꯖꯅꯤꯡꯉꯥꯏ ꯑꯣꯏ, ꯑꯗꯨꯕꯨ ꯑꯅꯧꯕꯥ ꯑꯃꯅꯤ꯫ ꯃꯃꯥꯡꯗꯥ ꯍꯥꯌꯈꯤꯕꯒꯨꯝꯅꯥ, ꯑꯩꯅꯥ ꯏꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔꯐꯛꯁ ꯑꯁꯤ ꯍꯧꯖꯤꯀꯁꯨ ꯄꯣꯂꯤꯐꯤꯜ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯦꯖ ꯀꯦꯁꯁꯤꯡ ꯍꯤꯠ ꯇꯧꯈ꯭ꯔꯦ ꯃꯗꯨꯗꯤ ꯑꯩꯍꯥꯛꯅꯥ ꯊꯥꯖꯗꯕꯥ ꯐꯣꯂꯕꯦꯀꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯈꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯉꯁꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯦꯞꯄꯥ ꯂꯩꯇꯕꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯇꯃꯊꯤꯔꯕꯥ ꯁꯔꯨꯀꯁꯤꯡꯒꯤꯗꯃꯛ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯇꯥ ꯌꯧꯔꯛꯂꯤ꯫ ꯑꯩꯅꯥ ꯇꯁꯦꯡꯅꯥ ꯑꯩꯒꯤ ꯋꯥꯔꯀꯐ꯭ꯂꯣ ꯍꯣꯡꯗꯣꯀꯈꯤꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯁꯤ HTML Popover APIꯅꯤ, ꯃꯁꯤ ꯍꯧꯖꯤꯛꯇꯤ ꯃꯣꯗꯔꯟ ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯐꯪꯂꯦ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯂꯩꯕꯥ ꯏꯂꯤꯃꯦꯟꯇꯁꯤꯡꯅꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯒꯤ ꯃꯊꯛꯀꯤ ꯂꯦꯌꯔꯗꯥ, ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯊꯛꯇꯥ, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯅꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯏ꯫

ꯍꯥꯡꯗꯣꯀꯎ

ꯑꯦꯁ꯭ꯀꯦꯞ ꯍꯦꯟꯗꯜ ꯇꯧꯕꯥ, ꯗꯤꯁꯃꯤꯁꯟ-ꯑꯣꯟ-ꯀ꯭ꯂꯤꯛ-ꯑꯥꯎꯠꯁꯥꯏꯗ, ꯑꯃꯁꯨꯡ ꯁꯣꯂꯤꯗ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯁꯦꯃꯦꯟꯇꯤꯀꯁꯤꯡ ꯑꯁꯤ ꯇꯨꯂꯇꯤꯄꯁꯤꯡ, ꯗꯤꯁꯛꯂꯁꯔ ꯋꯤꯖꯇꯦꯃꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯏꯆꯝ ꯆꯝꯕꯥ ꯑꯣꯚꯔꯂꯦꯁꯤꯡꯒꯨꯝꯕꯥ ꯄꯣꯠꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯐ꯭ꯔꯤ ꯑꯣꯏꯅꯥ ꯂꯥꯀꯏ꯫ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯑꯩꯅꯥ ꯌꯧꯔꯀꯄꯥ ꯑꯍꯥꯅꯕꯥ ꯈꯨꯠꯂꯥꯌꯅꯤ꯫ ꯍꯥꯌꯕꯗꯤ ꯃꯁꯤꯅꯥ ꯄꯣꯖꯤꯁꯟ ꯄꯤꯕꯥ ꯉꯃꯗꯦ꯫ ꯃꯁꯤꯅꯥ ꯂꯦꯌꯔꯤꯡ ꯁꯣꯜꯕ ꯇꯧꯏ꯫ ꯄꯣꯄꯣꯚꯔ ꯑꯃꯥ ꯃꯁꯤꯒꯤ ꯇ꯭ꯔꯤꯒꯔꯗꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯍꯧꯖꯤꯀꯁꯨ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯄꯣꯄꯣꯚꯥꯔ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯂꯦꯌꯔꯤꯡ ꯑꯁꯤ ꯍꯦꯟꯗꯜ ꯇꯧꯏ꯫ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯅꯥ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯑꯗꯨ ꯍꯦꯟꯗꯜ ꯇꯧꯏ꯫ ꯄꯨꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯒꯥ, ꯃꯈꯣꯌꯅꯥ ꯃꯃꯥꯡꯗꯥ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ ꯑꯃꯗꯥ ꯇꯧꯒꯗꯕꯥ ꯊꯕꯛ ꯑꯌꯥꯝꯕꯕꯨ ꯀꯣꯅꯁꯤꯜꯂꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯐꯤꯚꯃꯒꯤꯗꯃꯛ ꯋꯥꯔꯦꯞ ꯂꯧꯕꯒꯤ ꯒꯥꯏꯗꯂꯥꯏꯟ ꯑꯃꯥ꯫ ꯃꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯔꯨꯕꯥ ꯂꯝꯕꯤꯗꯥ ꯆꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯍꯧꯖꯤꯛ ꯑꯩꯍꯥꯛꯅꯥ ꯇꯁꯦꯡꯅꯥ ꯈꯅꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯈꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯄꯣꯔꯇꯦꯜ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ.ꯇ꯭ꯔꯤꯒꯔ ꯑꯁꯤ ꯅꯦꯁ꯭ꯇꯦꯗ ꯁ꯭ꯛꯔꯣꯜ ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯗꯥ ꯌꯥꯝꯅꯥ ꯂꯨꯅꯥ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯩꯅꯥ ꯃꯁꯤ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯄꯦꯇꯔꯟ ꯑꯁꯤ ꯇꯦꯕꯜ ꯑꯦꯛꯁꯟ ꯃꯦꯅꯨꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯤꯖꯤꯟꯅꯈꯤ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯕꯨ ꯐꯣꯀꯁ ꯔꯤꯁ꯭ꯇꯣꯔ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯆꯦꯀꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯈꯤ꯫ ꯃꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯊꯥꯖꯕꯥ ꯌꯥꯕꯥ ꯑꯣꯄꯁꯅꯅꯤ, ꯑꯗꯨꯕꯨ ꯑꯍꯦꯅꯕꯥ ꯋꯥꯏꯔꯤꯡꯒꯤꯗꯃꯛ ꯃꯇꯝ ꯕꯖꯦꯠ ꯇꯧꯏ꯫ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯣꯖꯤꯁꯟ ꯁꯤꯖꯤꯟꯅꯧ.ꯃꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯚꯦꯅꯤꯂꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯅꯠꯠꯔꯒꯥ ꯂꯥꯏꯠꯋꯦꯠ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯃꯗꯥ ꯂꯩꯕꯥ ꯃꯇꯃꯒꯤꯗꯃꯛꯇꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯟꯁꯦꯁ꯭ꯇꯔ ꯑꯃꯠꯇꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯐꯣꯔꯝ ꯅꯠꯠꯔꯒꯥ ꯐꯤꯜꯇꯔꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯗꯕꯥ ꯃꯇꯃꯒꯤꯗꯃꯛꯇꯅꯤ꯫ ꯃꯁꯤ ꯁꯦꯠ ꯇꯧꯕꯗꯥ ꯂꯥꯏ ꯑꯃꯁꯨꯡ ꯗꯤꯕꯒ ꯇꯧꯕꯗꯥ ꯂꯥꯏ, ꯑꯗꯨꯒꯨꯝꯕꯥ ꯑꯊꯤꯡꯕꯥ ꯑꯃꯅꯥ ꯊꯝꯂꯤꯕꯃꯈꯩ꯫ CSS ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯁꯤꯖꯤꯟꯅꯧ.ꯅꯍꯥꯛꯀꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯇꯅꯥ ꯑꯌꯥꯕꯥ ꯄꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯔꯤꯆ ꯇꯧ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯐꯥꯏꯔꯐꯛꯁ ꯁꯄꯣꯔꯠ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ, ꯃꯁꯤ @oddbird ꯄꯣꯂꯤꯐꯤꯂꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯔꯣ. ꯃꯁꯤꯗꯥ ꯄ꯭ꯂꯦꯠꯐꯣꯔꯝ ꯑꯁꯤꯅꯥ ꯑꯔꯣꯏꯕꯗꯥ ꯆꯠꯂꯤ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯒꯣ-ꯇꯨ ꯑꯦꯞꯔꯣꯆ ꯑꯣꯏꯔꯒꯅꯤ꯫ DOM ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯗꯣꯀꯎ.ꯑꯥꯔꯀꯤꯇꯦꯀꯆꯔꯅꯥ ꯑꯌꯥꯕꯥ ꯄꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯖꯤꯔꯣ ꯔꯅꯇꯥꯏꯝ ꯀꯝꯞꯂꯦꯛꯁꯇꯤꯇꯤ ꯄꯥꯝꯃꯤ. ꯑꯩꯍꯥꯛꯅꯥ ꯊꯥꯖꯩ ꯃꯗꯨꯗꯤ ꯃꯁꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯟꯗꯔꯔꯦꯇꯦꯗ ꯑꯣꯄꯁꯟ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯄꯦꯇꯔꯅꯁꯤꯡ ꯄꯨꯅꯁꯤꯅꯕꯥ꯫ꯑꯗꯣꯝꯅꯥ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ ꯑꯁꯤ ꯑꯗꯣꯃꯒꯤ ꯄ꯭ꯔꯥꯏꯃꯥꯔꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯣꯏꯅꯥ ꯄꯥꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯇꯧꯕꯤꯌꯨ, ꯁꯄꯣꯔꯠ ꯇꯧꯗꯕꯥ ꯕ꯭ꯔꯥꯎꯖꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯐꯣꯂꯕꯦꯛ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯕꯤꯌꯨ. ꯅꯠꯔꯒꯥ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠ ꯑꯦꯛꯌꯨꯔꯦꯁꯤꯒꯤꯗꯃꯛ getBoundingClientRect()ꯒꯥ ꯄꯦꯌꯥꯔ ꯇꯧꯕꯥ DOM ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇꯀꯤꯗꯃꯛ ꯄꯣꯔꯇꯦꯜ ꯑꯃꯥ꯫

ꯂꯣꯏꯁꯤꯅꯕꯥ ꯉꯝꯕꯥ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯕꯥꯒ ꯑꯁꯤꯕꯨ ꯋꯥꯟ ꯑꯣꯐ ꯏꯁꯨ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯂꯧꯔꯝꯃꯤ — ꯄꯦꯆ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯈꯥ ꯆꯠꯊꯕꯥ ꯌꯥꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯅꯤ꯫ ꯑꯗꯨꯕꯨ ꯃꯇꯝ ꯑꯃꯗꯥ ꯑꯩꯍꯥꯛꯅꯥ ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯇꯝ ꯁꯥꯡꯅꯥ ꯐꯃꯗꯨꯅꯥ ꯃꯗꯨꯗꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯍꯨꯝ ꯄꯨꯝꯅꯃꯛ – ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯀ꯭ꯂꯤꯄꯤꯡ, ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯛꯁꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯕ꯭ꯂꯣꯀꯁꯤꯡ ꯀꯟꯇꯦꯟ ꯇꯧꯕꯥ – ꯃꯁꯤ ꯔꯦꯟꯗꯝ ꯑꯣꯏꯅꯥ ꯐꯥꯑꯣꯕꯥ ꯂꯦꯄꯈꯤ꯫ ꯑꯩꯅꯥ ꯁꯣꯀꯄꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯃꯥ ꯌꯦꯡꯕꯥ ꯉꯃꯈꯤ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯛꯇꯥ ꯀꯅꯥꯒꯤ ꯏꯄꯥ-ꯏꯄꯨꯅꯥ ꯊꯧꯗꯥꯡ ꯂꯧꯈꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯊꯤꯗꯣꯀꯄꯥ ꯉꯃꯈꯤ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯕꯨ ꯀꯔꯝꯅꯥ ꯄꯥꯔꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯑꯗꯨ ꯑꯁꯦꯡꯕꯥ ꯇꯦꯛ-ꯑꯣꯐ ꯑꯣꯏꯈꯤ꯫ ꯑꯆꯨꯝꯕꯥ ꯄꯥꯎꯈꯨꯝ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯑꯩꯅꯥ ꯌꯧꯔꯀꯈꯤꯕꯁꯤꯡ ꯑꯗꯨ ꯀꯣꯗꯕꯦꯖꯗꯥ ꯑꯩꯅꯥ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ ꯉꯝꯕꯁꯤꯡ ꯑꯗꯨꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ: ꯑꯦꯟꯁꯦꯁ꯭ꯇꯔ ꯇ꯭ꯔꯤ ꯑꯁꯤ ꯊꯥꯖꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯄꯣꯔꯇꯦꯂꯁꯤꯡ; ꯁꯦꯡꯅꯥ ꯑꯃꯁꯨꯡ ꯏꯆꯝ ꯆꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯄꯣꯖꯤꯁꯟ; ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯅꯥ ꯑꯩꯕꯨ ꯊꯤꯡꯂꯃꯗꯕꯥ ꯃꯇꯃꯗꯥ ꯏꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯆꯠꯊꯣꯛ-ꯆꯠꯁꯤꯟ ꯇꯧꯕꯥ; ꯑꯃꯁꯨꯡ ꯍꯧꯖꯤꯛ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯕꯥ, [...]ꯑꯩꯅꯥ ꯌꯥꯕꯥ ꯃꯐꯃꯗꯥ꯫ ꯅꯍꯥꯛꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯥ ꯈꯅꯕꯗꯥ ꯂꯣꯏꯁꯤꯜꯂꯕꯗꯤ, ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯑꯁꯤ ꯑꯔꯣꯏꯕꯥ ꯈꯣꯡꯊꯥꯡ ꯑꯣꯏꯅꯥ ꯂꯧꯒꯅꯨ꯫ ꯑꯩꯒꯤ ꯑꯦꯛꯁꯄꯔꯤꯌꯦꯟꯁꯇꯥ, ꯃꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯥꯄꯊꯣꯛꯅꯥ ꯂꯩꯕꯥ ꯃꯇꯝ ꯑꯗꯨꯅꯤ꯫ ꯑꯦ.ꯑꯥꯔ.ꯑꯥꯏ.ꯑꯦ.ꯒꯤ ꯃꯔꯤꯁꯤꯡ, ꯐꯣꯀꯁ ꯃꯦꯅꯦꯖꯃꯦꯟꯇ, ꯀꯤꯕꯣꯔꯗꯀꯤ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ — ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯄꯣꯂꯤꯁ ꯅꯠꯇꯦ꯫ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯄꯣꯠꯁꯛ ꯑꯗꯨꯕꯨ ꯇꯁꯦꯡꯅꯥ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯄꯥꯡꯊꯣꯀꯄꯒꯤ ꯁꯔꯨꯛ ꯑꯃꯅꯤ꯫ ꯑꯩꯒꯤ GitHub ꯔꯦꯄꯣꯗꯥ ꯃꯄꯨꯡꯐꯥꯕꯥ ꯁꯣꯔꯁ ꯀꯣꯗ ꯑꯗꯨ ꯆꯦꯛ ꯇꯧꯕꯤꯌꯨ꯫ ꯃꯈꯥ ꯇꯥꯅꯥ ꯄꯥꯕꯥ꯫ ꯃꯁꯤꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯔꯤꯉꯩꯗꯥ ꯑꯩꯍꯥꯛꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯂꯥꯀꯄꯥ ꯔꯤꯐꯔꯦꯟꯁꯁꯤꯡ ꯑꯁꯤꯅꯤ:

ꯁ꯭ꯇꯦꯀꯤꯡ ꯀꯟꯇꯦꯛꯁ (ꯑꯦꯝ.ꯗꯤ.ꯑꯦꯟ.) ꯑꯁꯤ . “ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯑꯦꯉ꯭ꯀꯔ ꯄꯣꯖꯤꯁꯟ ꯒꯥꯏꯗ”, ꯖꯨꯌꯥꯟ ꯗꯤꯌꯒꯣ ꯔꯣꯗ꯭ꯔꯤꯒꯦꯖ꯫ “ꯄꯣꯄꯣꯚꯥꯔ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯧꯗꯣꯀꯄꯥ”, ꯒꯣꯗꯁ꯭ꯇꯤꯝ ꯑꯕꯨꯔꯨ꯫ ꯐ꯭ꯂꯣꯇꯤꯡ ꯌꯨ.ꯑꯥꯏ.(floating-ui.com) ꯑꯃꯁꯨꯡ ꯌꯨ.ꯑꯥꯏ. ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯑꯣꯚꯔꯐ꯭ꯂꯣ (ꯑꯦꯝ.ꯗꯤ.ꯑꯦꯟ.)

You May Also Like

Enjoyed This Article?

Get weekly tips on growing your audience and monetizing your content — straight to your inbox.

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free