,可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<div id="rectangleA"></div>
<div id="rectangleB"></div>
CSS:
#rectangleA {
width: 200px;
height: 100px;
background-color: red;
position: relative;
}
#rectangleB {
width: 100px;
height: 50px;
background-color: blue;
position: absolute;
top: 0;
}
JavaScript:
// 监听矩形A的锚点变化事件
document.getElementById("rectangleA").addEventListener("resize", function() {
// 获取矩形A的新位置
var newPosition = document.getElementById("rectangleA").getBoundingClientRect().top;
// 设置矩形B的top属性为新位置的值
document.getElementById("rectangleB").style.top = newPosition + "px";
});
这样,无论矩形A的锚点如何变化,矩形B都会保持在矩形A的顶部对齐。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云