CSS錨點定位

CSS anchor positioning

code:html

<button

commandfor="my-popover"

command="toggle-popover"

class="button"

Open</button>

<div id="my-popover" popover class="popover">

<p>popover content</p>

</div>

code:css

.button {

anchor-name: --my-anchor;

}

.popover {

position-anchor: --my-anchor;

top: anchor(bottom);

left: anchor(left);

right: auto;

bottom: auto;

}

.tip {

position: absolute;

position-anchor: --my-btn;

position-area: bottom;

position-try-fallbacks: flip-block, flip-inline;

}