Computer >> Máy Tính >  >> Lập trình >> HTML

Sự cố HTML5 Canvas &z-index trong Google Chrome


Khi chúng tôi áp dụng chỉ mục z cho canvas có vị trí được cố định, nó sẽ dừng lại khiến chrome hiển thị tất cả các phần tử khác có position:được cố định đúng cách. Điều này chỉ xảy ra nếu canvas có kích thước lớn hơn 256X256 px.

Kết hợp cả h1 và canvas bằng div cố định và giải quyết vấn đề -

<div id = 'fixcontainer'>
   <h1>Test Title</h1>
   <canvas id = "backgroundCanvas" width = "1000" height = "300"></canvas>
</div>

Sau đây là CSS -

h1{
   position: fixed;
}
body{
   height: 1500px;
}
canvas{
   position: fixed; z-index: -10;
}