使用视口缩放 div 位置

Question

我正在做一个找不同的游戏。

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

我还有一个点（一个按钮，目前用于测试是蓝色的，但对于最终是透明的），这将是用户单击以获取差异的按钮。

我需要帮助让点在浏览器 window 调整大小时保持在红色圆圈内。

这是我的 JSFIDDLE 的 link 代码如下

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}

HTML

<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

这可能会帮助您开始！

您必须在 vw 中使用 height 和 width，因为屏幕会发生变化，圆圈的大小也应与视口对齐。

其次，您可以使用 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/

使用视口缩放 div 位置

Scale div position with viewport

html

javascript

css

css-position