div中的空格使用z-index

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>

我把员工div ...游戏盒div很大.. 我使用'clear：both'..但没有用..

1 st

2 nd

让工作人员选择图像

3 rd

最后，z-index使用了staffpick图像，在图像更多空间下

Answer 1

嗨，你可以给父母位置亲戚和孩子给这样的绝对

<强>的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>

现场演示http://jsfiddle.net/rohitazad/grE5A/

Answer 2

要“占用空间”，您可以使用margin-top:-50px;或使用此示例http://jsfiddle.net/grE5A/2/中的position:absolute。

注意我给了<a>标签相对位置，因为它是#staff绝对需要定位的'父母'。

你在图像下面留有空间的原因是因为position:relative; top:-50px移动了相对于它原始位置的人员拾取，但是父元素仍然表现得像元素处于其原始位置。 （Z-index对你要做的事没有任何影响。）