Html 将Div置于Div内

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

CSS:

.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>

HTML:

.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>

欢迎
文本

这是我得到的结果：

我的问题是我怎样才能把文字放在图片下面，放在图片上面，而不是放在图片下面？ 我不知道需要做什么。

两者都做

position: relative;

然后用类似的方法调整jumbotron

top: -100px;

及

属性

---

尝试在CSS中为内部contaner使用绝对位置：

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

和外部容器的相对位置：

.hero-spacer {
    position: relative;
}

---

示例：

下面的内容应该能帮您解决问题

---

.hero{
位置：相对位置；
}
琼伯伦先生{
填充：30px 15px；
颜色：继承；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
背景：rgba（255,255,255,0.35）；
边界半径：3px；
盒影：0 1px 5px rgba（0,0,0,0.25）；
字体系列：Helvetica Neue、Helvetica、Arial、无衬线字体；
z指数：2；
位置：绝对位置；
底部：0px；
右：0px；
}
.背景图像{
填充：30px 15px；
边缘底部：30px；
颜色：继承；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
背景图片：url(http://localhost:2359/images/6H.jpg);
背景尺寸：封面；
显示：块；
过滤器：模糊（5px）；
-webkit过滤器：模糊（5px）；
高度：800px；
左：0；
右：0；
z指数：1；
}

欢迎
正文

使用

position

和

z-index

CSS规则，如您所见，它在我的JSFIDLE中确实有效。所以你可能做了错误的更正。