html - 使用负边距重叠的 div 仅显示文本

Question

我有 2 个 div 包裹在一个 div(幻灯片)中。 我希望 lap div 出现在 wall div 的内部。我尝试将 minus top-margin 添加到 lap div，但它只显示文本“你好”，我看不到背景。

<div class="slide">

    <div id="wall"><img src="http://i.imgur.com/mGjd59Z.png"/></div>
    <div id="lap">hello</div>
  </div>


#lap {
    width: 50%;
    height: 100px;
    background-color: #F34245;
    margin-top:-60px;
}

jsfiddle reference

预期结果

但这就是我得到的。我在问为什么只出现文本？如果 lap div 位于墙 div 的下方，那么为什么会出现文本？？

---

编辑

我能够通过@Alon 的回答解决问题，但还有一个问题。

如果 lap div 在墙下面，为什么会出现文字？

Answer 1

尝试使用 transform:translateY(-60px); 而不是 margin-top:-60px;

或者使用z-index让它出现在上面:

#lap {
width: 300px;
height: 100px;
background-color: #F34245;
margin-top:-60px;
position: relative;
z-index: 1;
}

关于你的问题(如果 lap div 到墙的下面，那为什么会出现文本？？)我注意到如果你将 position:relative 添加到 #wall 然后文本没有出现，所以它可能与定位有关，但同样，我不确定为什么会出现这种行为。