CSS锚点定位position-try自动定位实例页面
回到相关文章 »效果:
代码:
CSS代码:
.trigger { anchor-name: --my-anchor; } .target { position: absolute; position-anchor: --my-anchor; inset-area: right span-bottom; width: 256px; margin-top: .5rem; /* 候补位置选项 * position-try-options: --bottom-left; } /* 候补位置 */ @position-try --bottom-left { inset-area: bottom span-left; }
HTML代码:
<button class="trigger">可拖拽按钮</button> <img class="target" src="1.jpg" />