CSS代码:
.trigger {
anchor-name: --anchor;
}
.target {
position: absolute;
position-anchor: --anchor;
left: anchor(center);
top: anchor(bottom);
transform: translate(-50%, 8px);
}
.trigger2 {
anchor-name: --anchor2;
}
.target2 {
position: absolute;
position-anchor: --anchor2;
left: anchor(center);
top: anchor(bottom);
justify-self: anchor-center;
}
HTML代码:
<button class="trigger">我是按钮</button>
<img class="target" src="1.jpg" width="256" />
<button class="trigger2">我是按钮</button>
<img class="target2" src="1.jpg" width="256" />