javascript - 在这种情况下的解决方法是通过降低不透明度来保持 z 顺序？

Question

我在为以下代码情况的元素堆叠和不透明度的默认行为找到一个好的解决方法时遇到问题。我可能不得不重新安排我的代码中的一些东西，但这次我似乎找不到合适的解决方案，我需要一些建议。
我必须牢记什么或什么解决方法可以在这里工作以永久强制在最顶部位置降低不透明度的蓝色方 block 并将 Canvas 保持在下方？

var rangeVal = document.getElementById('rangevalue');
var updateVal = function(val) {
  rangeVal.innerHTML = val;
};
updateVal(range.value);
var imgBlue = document.getElementsByClassName("page-header")[0];
range.addEventListener("input", function(value) {
    imgBlue.style.opacity = this.value / this.max;
});

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

.page-header:after {
  background-image: url(https://i.imgur.com/gkvp6Jn.jpg);
  height:100%; width: 100%; left:80px; top: 90px; content: "";
  z-index:2;  opacity:1; position:fixed; pointer-events:none
}

<input type="range" id="range" value="100" min="0" max="100" step="1"  
oninput="updateVal(this.value)"
style="position:fixed; top:32px; left:8px">
<div id="rangevalue"></div>
<div class="page-header"></div> 

<div id='div1' style="position:fixed; top:70px; left:100px">
<canvas id='canvas' width='120' height='120'> </canvas> </div>

Answer 1

只需增加page-header的z-index即可。您的问题是，当不透明度降低时，您会创建一个新的 stacking context和 painting order你的元素会改变:

var rangeVal = document.getElementById('rangevalue');
var updateVal = function(val) {
  rangeVal.innerHTML = val;
};
updateVal(range.value);
var imgBlue = document.getElementsByClassName("page-header")[0];
range.addEventListener("input", function(value) {
    imgBlue.style.opacity = this.value / this.max;
});

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

.page-header {
 position:relative;
 z-index:2;
}

.page-header:after {
  background-image: url(https://i.imgur.com/gkvp6Jn.jpg);
  height:100%; width: 100%; left:80px; top: 90px; content: "";
  z-index:2;  opacity:1; position:fixed; pointer-events:none
}

<input type="range" id="range" value="100" min="0" max="100" step="1"  
oninput="updateVal(this.value)"
style="position:fixed; top:32px; left:8px;">
<div id="rangevalue"></div>
<div class="page-header"></div> 

<div id='div1' style="position:fixed; top:70px; left:100px">
<canvas id='canvas' width='120' height='120'> </canvas> </div>