1

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

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

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

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

这是我的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}

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

2 回答 2

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>

于 2020-04-02T11:06:20.977 回答
0

你应该把蓝点和红圈放在一个div元素下面。然后让 div 的位置是relative，点和圆的位置absolute然后你可以定位div以定位红圈和蓝点。它们将始终位于同一区域，彼此之上。

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

此处的图形演示：https ://css-tricks.com/how-to-stack-elements-in-css/

于 2020-04-02T11:11:01.560 回答