覆蓋畫布覆蓋在畫布上

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%; 
}