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" />
