html - 将 div 放在图像上但响应

Question

我有一张图片，图片中手指上有一些圆圈。我在图像上放置发光的 div。

{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}

这就是我放置发光圆圈的方式。

.small_rings_group {
    position: absolute;
    left: 25.3vw;
    top: 10vh;
}

它在窗口宽度变化时效果很好，但是当我改变窗口的高度时，位置发生了变化。

Answer 1

1.) 对图像使用 position: relative 使其充当绝对定位元素的“定位 anchor ”。

2.) 在绝对定位元素的 CSS 中，不要使用绝对值，而是使用 left 和 top 的百分比值(将相对于父元素)。这将使位置保持响应。