Overlap <div>s in CSS - css

Question

So, I've seen tons of questions about this, but I would like a personal example. I'm rather new to programming, so I may be a little stupid...
Anyway, I have two <div>s, one with id bg and the other with class player.
This is what it looks like:
The red box is the player, and the large image is the bg.
I need the player to start in the center of the bg.
The bg is 640px X 640px.
This is the code I have so far in my CSS file:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
}
.player {
position:relative;
background-color:#FF0000;
width: 32px;
height: 32px;
top: 0px;
left: 0px;
}

Answer 1

Try changing your stylesheet to:
#bg {
width: 640px;
height: 640px;
top: 0;
left: 0;
position: relative;
}
.player {
position: absolute;
background-color: #FF0000;
width: 32px;
height: 32px;
top: 320px;
left: 320px;
z-index: 1;
}
And your HTML should look like this:
<div id="bg">
<!-- your bd code here -->
<div class="player"></div>
</div>

Answer 2

position: relative is relative to where the object would be placed normally. In your example, it would normally come below the first div, so that's where it will stay. (In other words position: relative used with a positioning of 0 won't move the objet anywhere.)
You could add top: -320px; left: 320px. That would position it it the space of the first div. But maxksbd19's answer is probably the better solution for your ultimate goal.

Answer 3

I try and avoid absolute positioning as it does not adapt to the container size and a change to the container requires you to go through your css and change all the absolute values.
I would do the following
CSS:
#bg {
overflow: auto; /* stops the .player from from moving #bg down */
width: 640px;
height: 640px;
background-color: blue;
text-align: center; /* center child div in IE */
}
.player {
background-color: White;
width: 32px;
height: 32px;
margin: 0 auto; /* center div in parent for non IE browsers */
margin-top: 304px; /* 50% from top minus div size */
}
HTML:
<div id="bg">
<div class="player"></div>
</div>
Now you only have to keep track of the top margin of the child container.