CSS3: How can I get something that works like “absolute” but isn't?

Question

I have a game going where i'm doing hitsplats to show up over your picture as you hit your opponent. I"m using the absolute position and this works but I encountered a problem. The problem being that if I resize the window or I am in another resolution, these spots are not how I orginally setup them up. Putting my hit splats in relative mode only moves stuff around. So how can I get my hitsplats in the center like they are now with Absolute, but yet not make them absolutely absolute? So they flow with the document?

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

Here is HTML code

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

Answer 1

Can you show html and you're trying to center the hisplate only? If so do this

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

Answer 2

Try adding this to container's CSS for the hitsplat/hitbox div:

position:relative;

It should make the hitbox position absolutely to the container and not the window.

In theory it should shift the container from the browser window to whatever div/container you assign position:relative to.

Answer 3

use resize event in jquery to fit it to exact position when window is resized

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