0 
    .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 次

在此处输入图像描述

第 2 次

地方员工挑选图片

地方员工挑选图片

第 3 次

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

在此处输入图像描述

4

2 回答 2

0

嗨，您可以像这样给父位置相对，而子给绝对位置

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/

于 2012-04-13T05:32:46.200 回答
0

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

请注意，我已经为<a>标签指定了相对位置，因为它是#staff 需要绝对定位的“父级”。

您在图像下方留出空间的原因是因为position:relative; top:-50px工作人员相对于其原始位置拾取移动，但父级仍然表现得像元素处于其原始位置一样。（Z-index 对您尝试执行的操作没有影响。）

于 2012-04-13T07:35:34.680 回答