Trong html 5, cách định vị phần tử div trên phần tử canvas?

Question

Bất cứ ai có thể giúp tôi: Tôi đang cố gắng đặt một phần tử div (nói, 10px x 10px) trên đầu (phía trước) của phần tử canvas (nói 500px x 500px) trong html. Tôi đã thử thay đổi chỉ mục z của từng mục, không có kết quả. Có ai có ý tưởng nào không, hay đó là một trong những điều mà bạn không thể thực sự làm được? Tôi đã biết cách định vị tuyệt đối và mọi thứ, phần tử div chỉ bị treo ở hậu cảnh phía sau phần tử canvas. Tôi cần một cách để đưa nó về phía trước và phần tử canvas ở phía sau.

Cảm ơn!

Answer 1

XHTML

<div id="canvas"> 
    <div id="topelement"> 
    </div> 
</div> 

Css Styling

#canvas { height: 500px; width: 500px; overflow: hidden; } 
#topelement { height: 10px; width: 10px; float: left; } 

Answer 2

Điều đó phụ thuộc vào nơi yếu tố của bạn đang có.

Để sử dụng chỉ mục z, bạn phải đặt vị trí thành tương đối hoặc tuyệt đối.

Answer 3

Tôi dường như không gặp vấn đề gì. Tôi đã tạo canvas/div mẫu như bạn đang nói ở đây tại JSbin: http://jsbin.com/adowo/edit

Đó có phải là những gì bạn đang tìm kiếm không? Hay tôi đang thiếu một cái gì đó?

Answer 4

Cách hoạt động của định vị tuyệt đối là, nói chung, các phần tử trước đó trong mã nằm phía sau các phần tử sau này trong mã. Để thay đổi bạn thực sự sử dụng z-index. Tuy nhiên, lưu ý rằng chỉ mục z chỉ hoạt động trên các phần tử được định vị.

Một điều khác có thể khiến bạn vấp ngã là tất cả yếu tố vị trí hoạt động như "vùng chứa" chỉ mục z. Vì vậy, nếu <div> xảy ra trước đó trong tài liệu và trong một vùng chứa vị trí khác, nó có thể bị ràng buộc vào lớp z-index của tổ tiên của nó, và vì vậy không bao giờ có thể thoát ra và hiển thị trên đầu trang của <canvas>. Nếu trường hợp này xảy ra, bạn sẽ phải viết lại một chút CSS hoặc sắp xếp lại trang của mình để <div> ở vị trí tốt.

Answer 5

Đôi khi điều này có thể xảy ra trong trải nghiệm của tôi. Tôi không biết điều gì đang xảy ra trong API canvas html5. Nếu bạn muốn vẽ một số hình dưới phần tử div, hãy sử dụng thẻ img thay vào đó, được liệt kê dưới đây.

--- mẫu mã này được viết với prototype.js (1.6) ---

< -javascript-số->

var canvas = $('canvas'); 
canvas.width = 200; 
canvas.height = 200; 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
ctx.arc(100, 100, 100, 0, - 360 * Math.PI/180, true); 
ctx.fillStyle = 'rgba(204, 204, 255, 1)'; 
ctx.strokeStyle = 'rgba(0, 51, 153, 1)'; 
ctx.fill(); 
ctx.stroke(); 
var imgStr = canvas.toDataURL(); 
var element = new Element('img', {'src' : imgStr); 
var target = $('layer1'); 
target.insert(element); 

< - html ->

<div id='layer2' style='z-index : 50;'>&nbsp;</div> 
<canvas id='canvas' style='z-index : 30;'></canvas> 
<div id='layer1' style='z-index : 10;'></div> 

Nhân tiện, trang chủ của tôi được viết bằng tiếng Nhật.

Answer 6

Tôi đã kết hợp với điều này trong một thời gian ngắn và cuối cùng làm cho nó hoạt động sau khi thiết lập chỉ mục z của thứ tôi muốn ở nền tới -1 (so với một số dương).