Javascript 使用视口缩放div位置

我正在做一个与众不同的比赛

到目前为止，我有一个红色圆圈显示的差异图像用于测试

我也有一个点（一个按钮，目前蓝色的测试，但最终透明），这将是用户点击得到的差异

我需要帮助使点在浏览器窗口调整大小时保持在红色圆圈内

这里是我的链接，代码如下

CSS:

HTML

---

这可能有助于你行动起来

您必须在

vw

中使用

高度

和

宽度

，因为屏幕会发生变化，圆圈的大小也应该与视图端口对齐

第二，你可以使用

媒体查询

，但是我认为这对你来说不是一个可行的选择，除非你非常擅长在屏幕分辨率改变时处理媒体查询，相反，正如我在回答中建议的那样，你可以使用

vw

来计算高度、宽度并正确放置另一个圆，其余的由属性来处理

.position001{
位置：相对位置；
}
.block001{
位置：绝对位置；
背景颜色：海蓝宝石；
边界半径：50%；
最高：9.2%；
左：61.4%；
宽度：5vw；
高度：5vw；
}
.按钮001{
背景色：透明；
边框：1px实心透明；
宽度：45px；
高度：42px；
}
.hide001{
边界：无；
大纲：无；
}

---

您应该将蓝点和红圈放在

div

元素下。然后让div的位置为相对，点和圆的位置为绝对，然后可以定位div，以定位红圈和蓝点。它们总是在同一个区域，彼此之上

这是因为绝对位置将使元素位置位于

0，0

，而不管是否存在另一个元素，甚至是100个元素。但是，由于如果元素位于相对位置的元素之下，则可以修改绝对位置，因此我们可以利用这一点轻松定位点和圆，并将它们放置在彼此的顶部

---

此处的图形演示：

您需要@mediaquery来解决此问题。使用%forpositionning@JackCrozz你查过我贴的答案了吗？你认为这有帮助吗？正如前面所说的，最好的方法是通过媒体查询来处理它，如果你对这个主题非常了解，如果不了解，那么视点是最好的方法，也许你必须调整代码，但它很方便。

.position001{position:relative}.block001{position:absolute;top:50px;left:673px;background-color:#7fffd4;border-radius:50%}.button001{background-color:transparent;border:1px solid transparent;width:45px;height:42px}.hide001{outline:0;border:none}

<div class="position001">
    <div id="board001">
        <button class="hide001" onclick="incorrect001()">
            <img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />
        </button>
        <div class="block001">
            <div id="disappear001">
                <button class="button001" onclick="correct001()"></button>
            </div>
        </div>
    </div>
</div>