Css 文本下推包含div的背景图像

我正在开发一个引导网站，它使用Triangalify为我的英雄div生成背景图像。我希望文本进入英雄图像，但它会不断向下推我的图像

HTML

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script type="text/javascript">
    var something = document.getElementById('heroImageContainer');
    var dimensions = something.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width,
        height: dimensions.height
    });
    heroImageContainer.appendChild(pattern.canvas());
</script>

var something=document.getElementById（'HeroMageContainer'）；
var dimensions=something.getClientRects（）[0]；
变量模式=三角形({
宽度：尺寸。宽度，
高度：尺寸。高度
});
appendChild（pattern.canvas（））；

这是这个问题的一个有效的解释

---

如何定位画布，然后在内容上添加z索引，以便将文本放在前面

canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}

---

如何定位画布，然后在内容上添加z索引，以便将文本放在前面

canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}

---

对不起，我不知道你想做什么。如果你想作为背景，为什么在英雄分区中有一行，因为我想在英雄图像中有内容。对不起，我不知道你想做什么。如果你想作为背景，为什么在英雄分区中有一行，因为我想在英雄图像中有内容。我不理解你的困惑。你的回答使我走上了正确的道路。我给文本的包含div一个绝对位置。修正了我的问题你的回答让我走上了正确的轨道。我给文本的包含div一个绝对位置。解决了我的问题

canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}