CSS锚点定位基本效果实例页面

回到相关文章 »

效果：

代码：

CSS代码：

.trigger {
    anchor-name: --my-anchor;    
}
.target {
    position: absolute;
    position-anchor: --my-anchor;
    left: anchor(left);
    top: anchor(bottom);
    width: 256px;
    margin-top: .5rem;
}

HTML代码：

<button class="trigger">可拖拽按钮</button>

<img class="target" src="1.jpg" />