我正在開發一款找茬游戲。到目前為止，我有一張帶有紅色圓圈所示差異的圖像進行測試。我還有一個點（當前為藍色的按鈕用于測試，但對于最終的結果是透明的），用戶單擊該點即可獲得差異。當調整瀏覽器窗口大小時，我需要幫助使點保持在紅色圓圈內。這是我的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>
2 回答
MM們
TA貢獻1886條經驗 獲得超2個贊
這可能會幫助您開始行動！
您必須使用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>
慕標琳琳
TA貢獻1830條經驗 獲得超9個贊
您應該將藍點和紅圓圈放在div元素下方。然后設 div 的位置為relative，點和圓的位置為absolute，然后您可以定位 ，div以便定位紅圓和藍點。它們將始終位于同一區域，彼此之上。
這是因為絕對位置將使元素位置為 ，0, 0無論那里是否有另一個元素，甚至 100 個元素。但是，由于如果元素位于相對定位元素下方，則可以修改絕對位置，因此我們可以利用這一點輕松定位點和圓，并將它們放置在彼此的頂部。
圖形演示在這里：https://css-tricks.com/how-to-stack-elements-in-css/
- 2 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消