css - 使用 z-index 的 div 空间

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>

我把 staff div.. games-box div 很大..我使用“clear:both”..但没用..

第一

第二个

放置员工挑选图片

第三

最后，z-index使用了staffpick图片，图片下方空间更大

Answer 1

你好，你可以像这样给父位置 relative 和 child 给 absolute

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/