重叠div使用减号仅显示文本

Question

我有两个div包在一个div(幻灯片)。我想让圈内的div出现在墙上的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;
}

摇摆不定参考

预期结果

​

​

但这就是我想要的。我是在问为什么只有文字出现呢?如果墙div的下方有圈div，那么为什么会出现文本呢？？

​

​

​

编辑

​

我能够用@Alon回答来解决这个问题，但是有一个问题。

如果搭接div在墙下面，那么为什么会出现文本？

Answer 1

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

或者使用z索引将其显示在上面：

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

关于你的问题(如果膝盖到墙下面，那么为什么会出现文字？)我注意到，如果将position:relative添加到#wall中，那么文本就不会出现，因此它可能与定位有关，但我还是不知道为什么会出现这种行为。