css - 如何以绝对位置显示画布滚动

Question

我有绝对位置和 z-index 的双层画布。我想滚动画布。

我尝试使用带有自动滚动功能的父 div，但没有成功，它显示了所有画布区域。可能是z-index问题

这是我的html代码。

<div style="overflow:scroll; width:500px; height:500px;">
   <canvas id="canvas1" style="position: absolute; left:10px; top:10px; z-index:0;"></canvas>
   <canvas id="canvas2" style="position: absolute; left:10px; top:10px; z-index:1;"></canvas>
</div>

请提出任何想法。谢谢你

Answer 1

解决了问题。

我使用了实际位置和顶部：-（canavas1.height）px

<div style="overflow:scroll; width:500px; height:500px;">
   <canvas id="canvas1" style="position: relative; height:100px; z-index:0;"></canvas>
   <canvas id="canvas2" style="position: relative; top:-100px; z-index:1;"></canvas>
</div>