CodeGrid【公式】

@codegrid.net

Jamstackの会社ピクセルグリッドが運営するWeb制作者のための有料フロントエンド技術情報メディア「CodeGrid」です。過去記事からの HTML / CSS / JavaScriptなどに関するお役立ちTipsと、毎週の配信内容をポストします。 https://www.codegrid.net/

.target {
position: absolute;
position-anchor: --my-anchor;
top: anchor(top);
left: calc(anchor(right) + 10px);
}

アンカー要素(水色の破線枠)と配置する要素(紫の枠)の位置関係を示す図。anchor(top)がアンカー要素の上辺、anchor(right)が右辺を指すことを矢印で説明している。配置する要素のtopとleftがそれぞれアンカーの辺を基準に配置されている。

.anchor {
anchor-name: --my-anchor;
}
.target {
position: absolute;
position-anchor: --my-anchor;
top: anchor(bottom);
}

observer.observe(document.body, {
childList: true, subtree: true
});

$.Tooltip.-top { bottom: calc(100% + var(--_triangle-size) + var(--_gap)); left: 50%; translate: -50% 0; }$