Javascript 在这种情况下，如何在降低不透明度的情况下保持z顺序？

对于下面的代码情况，我很难找到一个很好的解决方法来解决元素堆叠和不透明度的默认行为。我可能需要重新安排代码中的某些内容，但这次似乎找不到合适的解决方案，我需要一些建议。
我必须记住什么，或者这里有什么解决方法可以永久性地强制蓝色方块在最上面的位置降低不透明度，并保持画布在下面

var rangeVal=document.getElementById（'rangevalue'）；
var updateVal=函数（val）{
rangeVal.innerHTML=val；
};
updateVal（range.value）；
var imgBlue=document.getElementsByClassName（“页眉”）[0]；
range.addEventListener（“输入”），函数（值）{
imgBlue.style.opacity=this.value/this.max；
});
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（0，0，canvas.width，canvas.height）
。页眉：之后{
背景图片：url(https://i.imgur.com/gkvp6Jn.jpg);
高度：100%；宽度：100%；左侧：80px；顶部：90px；内容：“”；
z索引：2；不透明度：1；位置：固定；指针事件：无
}
只需增加
页眉的z索引即可。您的问题是，当不透明度降低时，您将创建一个新的不透明度，并且元素的颜色将更改：


var rangeVal=document.getElementById（'rangevalue'）；
var updateVal=函数（val）{
rangeVal.innerHTML=val；
};
updateVal（range.value）；
var imgBlue=document.getElementsByClassName（“页眉”）[0]；
range.addEventListener（“输入”），函数（值）{
imgBlue.style.opacity=this.value/this.max；
});
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（0，0，canvas.width，canvas.height）
。页眉{
位置：相对位置；
z指数：2；
}
.页眉：在{
背景图片：url(https://i.imgur.com/gkvp6Jn.jpg);
高度：100%；宽度：100%；左侧：80px；顶部：90px；内容：“”；
z索引：2；不透明度：1；位置：固定；指针事件：无
}
您也想降低红色框的不透明度