使用視口縮放 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}

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處0, 0無論那里是否有另一個元素，甚至 100 個元素。 但是因為如果元素位於相對定位的元素下，則可以修改絕對位置，所以我們可以利用這一點輕松定位點和圓，並將它們放在彼此的頂部。

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