Javascript 叠加图像&；PixiJS粒子容器上的文本？

我是一个网络开发新手，创建了我的第一个个人投资组合页面。我试图用这个粒子容器作为一种背景英雄“视频”

Codepen.io-

HTML:

现在我将省略JS，因为它相当长，但是如果您想看一看（并查看粒子容器的实际外观），它就在代码笔中

我一直试图在容器上覆盖一个图像和文本（比如我的图片，下面有我的名字），但它们要么就在上面或下面，要么就完全消失了（我假设是在它后面）

我的HTML：

<div class="container-fluid">
    <div id="fps"></div>
    <div class="row">
        <div class="col-lg-3 col-lg-offset-4">
            <img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>
</div>

我没有修改任何JS

---

如果有人能给我一些见解或给我指出解决这个问题的正确方向，我将不胜感激

您只需绝对定位您的

：

html, body {
    margin: 0;
    padding: 0;
}

#fps {
    position: absolute;
    bottom: 5px;
    right: 5px;

    font-family: sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    color: rgba(255,255,255,0.5);

    z-index: 2;
}

<div class="container-fluid">
    <div id="fps"></div>
    <div class="row">
        <div class="col-lg-3 col-lg-offset-4">
            <img id="profile-image" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>
</div>

html {
    font-family: 'Raleway', sans-serif;
}
/* Navbar Stuff Here */
#fps {
    color: #fff;
    color: rgba(255,255,255,0.5);
    z-index: 2;
}
#profile-image {
    border-radius: 100%;
    height: 150px;
    background-color: yellow;
}

.container-fluid{
    z-index:1;
    position: absolute;

}