Space in div using z-index - css

Question

.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
}
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:relative; top:-50px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
I put staff div.. the games-box div is large..
i use 'clear:both'.. but no use..
1 st
2 nd
place staff pick image
3 rd
finally, z-index used staffpick image, under image more space

Answer 1

Hi you can give parent position relative and child give absolute as like this
Css
.games_box
{
width:575px;
margin:8px auto;
background:#f8f7f7;
padding:8px;
border-bottom:#000000 1px dotted;
position:relative;
}
HTML
<div class="games_box">
<a href='#'>
<img src='$host_name/staff/game-$row[0].gif' width='78' height='75' alt='games' />
<div id='staff' style='position:absolute; top:-5px;z-index:1; left:29px'>
<img src='images/staff_picks.png' alt='staffpick' width='50' height='51' /></div>
</a>
</div>
Live Demo http://jsfiddle.net/rohitazad/grE5A/

Answer 2

To 'suck up the space' you can use margin-top:-50px; or use position:absolute like in this example http://jsfiddle.net/grE5A/2/.
Notice I've given the <a> tag the relative position as it is the 'parent' that #staff needs to be positioned absolutely in.
The reason you had the space under the image is because position:relative; top:-50px moves the staff pick up relative to it's original position, but the parent still behaves like the element is in its original position. (Z-index has no effect what you are trying to do.)