使用视口缩放 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 {

  position: relative;

}

.block001 {

  position: absolute;

  background-color: aquamarine;

  border-radius: 50%;

  top: 9.2%;

  left: 61.4%;

  width: 5vw;

  height: 5vw;

}

.button001 {

  background-color: transparent;

  border: 1px solid transparent;

  width: 45px;

  height: 42px;

}

.hide001 {

  border: none;

  outline: 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 2

您应该将蓝点和红圆圈放在div元素下方。然后设 div 的位置为relative，点和圆的位置为absolute，然后您可以定位 ，div以便定位红圆和蓝点。它们将始终位于同一区域，彼此之上。

这是因为绝对位置将使元素位置为 ，0, 0无论那里是否有另一个元素，甚至 100 个元素。但是，由于如果元素位于相对定位元素下方，则可以修改绝对位置，因此我们可以利用这一点轻松定位点和圆，并将它们放置在彼此的顶部。

图形演示在这里：https://css-tricks.com/how-to-stack-elements-in-css/