使用 z-index 的 div 中的空间答案

【问题标题】：Space in div using z-index使用 z-index 的 div 中的空间
【发布时间】：2012-04-13 05:28:09
【问题描述】：

    .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 .. games-box div 很大.. 我用'clear:both'..但没用..

1st

第二次

员工挑选图片

第三次

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

【问题讨论】：

你能解释一下你到底需要什么或者给我们看小提琴或者给我们截图....

标签： css image html styles

【解决方案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/

【讨论】：

我更改了 css 和人员 div 样式..人员选择不可见。我只需要基本图像而不是员工选择图像..
您的代码和我设置了员工 div 的宽度、高度.. 它的工作.. 谢谢

【解决方案2】：

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

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

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

【讨论】：