Question

我希望有一个低z-index <canvas>显示连续的生成动画，然后在其上面有一个高z指数<div>，它具有50％的不透明度白色背景还有一些文字。

<div>有很多文字，所以需要垂直滚动，但我希望它背后的<canvas>保持不变。

你如何在CSS中做到这一点？

Answer 1

假设这样的标记：

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

您可以使用以下样式实现顶层效果：

.top-layer {
    display:block;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    overflow-y: scroll;
}

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

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

应该这样做。

用于全屏z-index的CSS

1 个答案: