用于全屏z索引的CSS

我希望有一个低z索引

显示连续生成动画，然后在其顶部有一个高z索引

，具有50%不透明度的白色背景和一些文本

有很多文本，因此需要垂直滚动，但我希望后面的

保持不变

---

如何在CSS中实现这一点？

假设这样的标记：

<canvas id="myCanvas">
<div class="top-layer">Your content</div>

画布有点复杂，因为您需要显式地将此元素的高度和宽度指定为属性。您必须使用javascript确定文档维度，并在页面加载时分配它们：

var height = document.body.clientHeight,
    width = document.body.clientWidth,
    myCanvas = document.getElementById('myCanvas');
myCanvas.setAttribute('height', height);
myCanvas.setAttribute('width', width);

---

应该这样做。

在询问之前考虑养成谷歌搜索的习惯。使用搜索发现这些都是微不足道的。建议的查询包括

div不透明度

，

div固定位置

，以及

div启用垂直滚动

。

var height = document.body.clientHeight,
    width = document.body.clientWidth,
    myCanvas = document.getElementById('myCanvas');
myCanvas.setAttribute('height', height);
myCanvas.setAttribute('width', width);