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

Question

我在div（幻灯片）中包含了2个div。 我希望lap div出现在wall div中。我尝试将减去上边距添加到lap div中，但它只显示文本＆＃39; hello＆＃39;而且我看不到背景。

<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位于wall div之下，那么为什么会出现文字？

<小时/> 编辑

我能用@Alon答案解决问题，但有一个问题。

如果圈下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;
}

关于你的问题（如果圈数在墙下，那么为什么会出现文字？）我注意到如果你将position:relative添加到#wall，那么文字就没有了＃39} ; t看起来可能与定位有关，但同样，我不确定为什么这种行为就是这样。