เมื่อเรานำดัชนี z ไปใช้กับผืนผ้าใบที่มีตำแหน่งคงที่ จะหยุดทำให้ Chrome แสดงผลองค์ประกอบอื่นๆ ทั้งหมดที่มี position:fixed อย่างถูกต้อง สิ่งนี้จะเกิดขึ้นก็ต่อเมื่อผ้าใบมีขนาดใหญ่กว่า 256X256 พิกเซล
ห่อทั้ง h1 และ canvas ด้วย div คงที่และแก้ปัญหา -
<div id = 'fixcontainer'> <h1>Test Title</h1> <canvas id = "backgroundCanvas" width = "1000" height = "300"></canvas> </div>
ต่อไปนี้เป็น CSS -
h1{
position: fixed;
}
body{
height: 1500px;
}
canvas{
position: fixed; z-index: -10;
} 