Chrome125以降での利用が可能なCSSです。
基準となる要素が可変しても、別の要素を指定した場所に固定表示することができるCSSのサンプルです。
以下のベースとなる要素の周りに、番号を振って８種類の場所のサンプルを記載しています。
1
2
3
4
5
6
7
8
まず、HTMLはこちら
<div class="demo_base_item">
<p>ベースとなる要素</p>
</div>
<div class="demo_anchor_item_1 demo_red">1</div>
<div class="demo_anchor_item_2 demo_red">2</div>
<div class="demo_anchor_item_3 demo_red">3</div>
<div class="demo_anchor_item_4 demo_red">4</div>
<div class="demo_anchor_item_5 demo_blue">5</div>
<div class="demo_anchor_item_6 demo_blue">6</div>
<div class="demo_anchor_item_7 demo_blue">7</div>
<div class="demo_anchor_item_8 demo_blue">8</div>
ベースの要素の後に、周囲に追跡させたい要素があります。
anchor属性を利用していて１について解説です。
.demo_base_item {
/* ↓ベースとなる要素に任意のanchor-nameを書きます */
anchor-name: --anchor-el;
}
.demo_anchor_item_1 {
position: absolute;
/* ↓紐付けるanchor-nameを書きます */
position-anchor: --anchor-el;
/* ↓配置したい場所を書きます */
bottom: anchor(top); /* 張り付く要素の「底」を、ベースの「上」に付けると覚える */
left: anchor(left); /* 張り付く要素の「左」を、ベースの「左」に付けると覚える */
}
CSSはこちら
.demo_base_item {
anchor-name: --anchor-el;
background: #333;
color: white;
width: 200px;
height: 200px;
margin: 70px;
text-align: center;
line-height: 200px;
}
.demo_anchor_item_1 {
position: absolute;
position-anchor: --anchor-el;
bottom: anchor(top);
left: anchor(left);
}
.demo_anchor_item_2 {
position: absolute;
position-anchor: --anchor-el;
bottom: anchor(top);
right: anchor(right);
}
.demo_anchor_item_3 {
position: absolute;
position-anchor: --anchor-el;
top: anchor(bottom);
right: anchor(right);
}
.demo_anchor_item_4 {
position: absolute;
position-anchor: --anchor-el;
top: anchor(bottom);
left: anchor(left);
}
.demo_anchor_item_5 {
position: absolute;
position-anchor: --anchor-el;
top: anchor(top);
right: anchor(left);
}
.demo_anchor_item_6 {
position: absolute;
position-anchor: --anchor-el;
top: anchor(top);
left: anchor(right);
}
.demo_anchor_item_7 {
position: absolute;
position-anchor: --anchor-el;
bottom: anchor(bottom);
left: anchor(right);
}
.demo_anchor_item_8 {
position: absolute;
position-anchor: --anchor-el;
bottom: anchor(bottom);
right: anchor(left);
}
.demo_red {
background: #F00;
color: white;
border-radius: 100%;
width: 3rem;
height: 3rem;
font-size: 1rem;
line-height: 3rem;
text-align: center;
}
.demo_blue {
background: #00F;
color: white;
border-radius: 100%;
width: 3rem;
height: 3rem;
font-size: 1rem;
line-height: 3rem;
text-align: center;
}
