html - 将 DIV 置于其他 DIV 和图像之上

Question

我有以下 HTML ( Plunker Example ):

<div class="first">
  <img src="http://placehold.it/350x150">
</div>

<div class="second">
  Lorem Ipsum ...
</div>        

我需要将第二个 DIV 的一部分放在第一个 DIV 上，所以我使用了:

body {
  text-align: center;
}

.first {
  background-color: orange;
  z-index: 100;
}

.first img {
  display: block;
  margin: 0 auto;
}

.second {
  background-color: red;
  margin: -80px 0 auto;
  z-index: 200;
}

奇怪的是第二个 DIV 中的文本出现在图像上，而不是第二个 DIV。红色应该在图像上，因为文本是 ...

有人知道如何解决这个问题吗？

Answer 1

position: relative; 在第二个div中