使用视口缩放 div 位置

Question

我正在开发一款找茬游戏。

到目前为止，我有一张带有红色圆圈所示差异的图像进行测试。

我还有一个点（当前为蓝色的按钮用于测试，但对于最终的结果是透明的），用户单击该点即可获得差异。

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

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

CSS：

.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>

Answer 1

这可能会帮助您开始行动！您必须使用heightand widthin vw，因为屏幕会发生变化，并且圆圈的大小也应与视口对齐。其次，您可以使用，Media query但我认为这对您来说不是一个可行的选择，除非您非常擅长在屏幕分辨率更改时处理媒体查询，而不是按照我的答案中的建议，您可以使用高度、宽度并放置另一个vw圆圈正确的是，剩下的财产会处理它。.position001 {&nbsp; position: relative;}.block001 {&nbsp; position: absolute;&nbsp; background-color: aquamarine;&nbsp; border-radius: 50%;&nbsp; top: 9.2%;&nbsp; left: 61.4%;&nbsp; width: 5vw;&nbsp; height: 5vw;}.button001 {&nbsp; background-color: transparent;&nbsp; border: 1px solid transparent;&nbsp; width: 45px;&nbsp; height: 42px;}.hide001 {&nbsp; border: none;&nbsp; outline: none;}<div class="position001">&nbsp; <div id="board001">&nbsp; &nbsp; <button class="hide001" onclick="incorrect001()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://stefan.admark.co.uk/jimny.jpg" width="90%" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; <div class="block001">&nbsp; &nbsp; &nbsp; <div id="disappear001">&nbsp; &nbsp; &nbsp; &nbsp; <button class="button001" onclick="correct001()"></button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

您应该将蓝点和红圆圈放在div元素下方。然后设 div 的位置为relative，点和圆的位置为absolute，然后您可以定位 ，div以便定位红圆和蓝点。它们将始终位于同一区域，彼此之上。这是因为绝对位置将使元素位置为 ，0, 0无论那里是否有另一个元素，甚至 100 个元素。但是，由于如果元素位于相对定位元素下方，则可以修改绝对位置，因此我们可以利用这一点轻松定位点和圆，并将它们放置在彼此的顶部。图形演示在这里：https://css-tricks.com/how-to-stack-elements-in-css/