覆盖画布覆盖在画布上

Question

我有下面的代码，使用JavaScript库，我可以在第一个画布然后合并到第二个画布。

问题是，无论我在哪里滚动第二个画布，我如何使第一个画布变为静态或浮动状态。

#container { 
    position: relative; 
    border: 1px solid black; 
    overflow: auto; 
    width:400px; 
    height:200px; 
} 
#canvas1 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 3px solid green; 
    width:100%; 
    height:100%; 
} 
#canvas2 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 2px solid red; 
} 

<div id="container"> 
    <canvas id="canvas1"></canvas> 
    <canvas id="canvas2" height="1200" width="800"></canvas> 
</div> 

https://jsfiddle.net/wz2g8hwz/

Answer 1

现在您滚动包含两个画布的元素 - 所以两者移动。因此，将第二个画布放入它自己的容器元素中，并为其设置溢出，以便仅移动该容器（仅第二个画布）的内容。

新的容器元素需要以与第二个画布之前（绝对）相同的方式进行定位，并且该画布本身不再是绝对的。

在下面的例子中，我用图像替换了空的画布，所以效果变得可见。 （可悲的是，从占位服务将图像似乎并不通过HTTPS工作了，昨天的工作，但你得到了总体思路，我想。）https://jsfiddle.net/wz2g8hwz/4/

#container { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 

 
#canvas1 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    border: 3px solid green; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#innerContainer { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    border: 2px solid red; 
 
} 
 

 
#canvas2 { 
 
    opacity: .5; 
 
    width: 1200px; 
 
    height: 800px; 
 
}

<div id="container"> 
 
    <img id="canvas1" src="//via.placeholder.com/400x200"> 
 
    <div id="innerContainer"> 
 
    <img id="canvas2" src="//via.placeholder.com/1200x800"> 
 
    </div> 
 
</div>

Answer 2

刚在＃canvas2上添加width:100%和height:100%。

像这样。

#canvas2 { 
    position: absolute; 
    left: 0; 
    top: 0; 
    border: 2px solid red; 
    width: 100%; 
    height: 100%; 
}