CSS3：如何獲得類似“絕對”但不是這樣的東西？

Question

我正在玩一個游戲，我正在做擊打游戲，當你擊中對手時，它會顯示在你的照片上。 我使用的是絕對位置，但是可以，但是遇到了一個問題。問題是，如果我調整窗口的大小或使用其他分辨率，則這些斑點並不是我最初設置它們的方式。那么如何才能像我現在使用Absolute一樣使我的Hitsplats居中放置，但又不能使它們成為絕對絕對呢？

#npchitbox {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color:blue;
    z-index: 11;
    top: 100px;
    left: 1050px;
    text-align: center;
    font-weight: bold;
    font-size: 50px;
    color: red;
    }

這是HTML代碼

<div id="playerbox">
    <div id="hitbox"> </div>

Answer 1

您可以顯示html並僅嘗試將hisplate居中嗎？ 如果是這樣

{
margin: auto;
position: absolute;
top: 0; bottom:0; right:0; left:0;
}

Answer 2

嘗試將其添加到hitsplat / hitbox div的容器CSS中：

position:relative;

它應該使Hitbox的位置絕對相對於容器而不是窗口。

從理論上講，應將容器從瀏覽器窗口移至您為其分配position：relative的div / container。

Answer 3

調整窗口大小時，在jQuery中使用resize事件將其調整到正確的位置

$( window ).resize(function() {
  $( "#hitbox" ).attr( "top", ($( window ).height()-50) +"px" ); 
//since 50 is the size of the box you are using
});