如何在包含背景图像的空div上叠加div？

Question

我希望#intro div出现在.backgroundimg div上。我尝试了各种方法，比如使用z-index，定位但没有任何效果。请帮助我解决方案，并解释它是如何工作的。

HTML

<div class='backgroundimg'></div>

<div id='#intro'>
      <p>
       random content
      </p>
</div>

CSS

.backgroundimg {
  background-image: url("http://s9.postimg.org/7c2rqzb2n/homeback.jpg");
  height: 400px;
  width:100%;
  background-size:cover;
}

Answer 1

你想要这样的东西？如果是，我会在评论部分解释：）

.backgroundimg {
  position: relative;
  background-image: url("http://s9.postimg.org/7c2rqzb2n/homeback.jpg");
  height: 400px;
  width: 100%;
  background-size: cover;
  display: table;
}
#intro {
  positon: absolute;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
p {
  color: yellow;
  font-size: 50px;
}

<div class='backgroundimg'>

  <div id='intro'>
    <p>
      random content
    </p>
  </div>

</div>