Javascript 在div内的图像上放置悬停视差？

我有一个视差悬停部分，我有一些文本和CSS背景图像的顶部。我遇到的问题是，该部分在我的div/header中没有齐平，当我使用position:absolute时，情况更糟。我想知道是否有一种方法，我可以分层我的标题部分，使图像坐在后面的文字在上面，然后视差在上面？我尝试了z索引，但运气不好，视差部分就在我的标题的一角

我正试图实现这样的效果：但是里面有一个CSS背景图像和文本。我将尝试编写一个代码笔来详细说明，但在此期间，我有：

var scene=document.getElementById（'scene'）；
var parallaxInstance=新视差（场景）
标题{
高度：100vh；
背景图片：url（img/image.png）；
背景尺寸：封面；
背景附件：固定；
显示器：flex；
z指数：0；
}
标题行{
宽度：1150px；
}
页眉。新截面为白色{
背景色：透明；
证明内容：中心；
}
.英雄{
宽度：100vw；
}
.英雄h2{
字号：100；
字体大小：20px；
}
.英雄img{
宽度：100%；
}
标题部分视差{
/*位置：绝对位置*/
z指数：1；
}

一些文本页面标题