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
});