将div放在div中

Question

我有这个代码模糊图像和文本框：

.jumbotron {
    padding: 30px 15px;
    margin-bottom: 30px;
    color: inherit;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
      background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  z-index: 2;

}

.background-image {
        padding: 30px 15px;
    margin-bottom: 30px;
    color: inherit;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-image: url(http://localhost:2359/images/6H.jpg);
  background-size: cover;
  display: block;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 800px;
  left: 0;
  right: 0;
  z-index: 1;
}

<div class=" hero-spacer">
    <div class="background-image"></div>
        <header class="jumbotron hero-spacer">

            <h1>Welcome</h1>
            <p>TEXT
</p>

        </header>
</div>

这是我得到的结果：

我的问题是如何将文字放在图像下面，不放在图像下面？ 我不知道需要做什么。

Answer 1

尝试在CSS中使用绝对位置作为内部容器：

.jumbotron, .background-image {
    position: absolute;
}

外容器的相对位置：

.hero-spacer {
    position: relative;
}

示例：http://jsfiddle.net/q3a1w273/1/

Answer 2

同时

position: relative;

并用类似

的东西调整jumbotron

top: -100px;

和

left: 100px;

属性

http://jsfiddle.net/m4dpzf8v/2/

Answer 3

以下内容应该排除你。

＆＃13;

＆＃13;

.hero-spacer {
  position: relative;
}
.jumbotron {
  padding: 30px 15px;
  color: inherit;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  z-index: 2;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.background-image {
  padding: 30px 15px;
  margin-bottom: 30px;
  color: inherit;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(http://localhost:2359/images/6H.jpg);
  background-size: cover;
  display: block;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 800px;
  left: 0;
  right: 0;
  z-index: 1;
}

＆＃13;

<div class=" hero-spacer">
  <div class="background-image"></div>
  <header class="jumbotron">
    <h1>Welcome</h1>
    <p>TEXT</p>
  </header>
</div>

＆＃13;

＆＃13;

＆＃13;