En html 5, ¿cómo posicionar un elemento div en la parte superior de un elemento de lienzo?

Question

¿Alguien me puede ayudar? Estoy tratando de poner un elemento div (digamos, 10px por 10px) en la parte superior (delante) de un elemento canvas (digamos 500px por 500px) en html. He intentado cambiar el índice Z de cada uno, sin éxito. ¿Alguien tiene alguna idea, o es una de esas cosas que realmente no puedes hacer? Ya sé cómo hacer posicionamiento absoluto y todo, el elemento div simplemente se cuelga en el fondo detrás del elemento canvas. Necesito una forma de llevarlo al frente y el elemento de lona a la parte posterior.

Gracias!

Answer 1

XHTML

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

de estilo CSS

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

Answer 2

Eso depende de dónde están sus elementos son.

Para usar el índice Z, debe establecer la posición como relativa o absoluta.

Answer 3

Parece que no tengo el mismo problema. Creé un canvas/div de muestra como si estuvieras hablando aquí en JSbin: http://jsbin.com/adowo/edit

¿Eso es lo que estás buscando? ¿O me estoy perdiendo algo?

Answer 4

La manera en que funciona el posicionamiento absoluto es que, en general, los elementos que están antes en el código están detrás de los elementos que están más adelante en el código. Para cambiar eso, efectivamente usa el índice z. Sin embargo, tenga en cuenta que el índice Z solo funciona en los elementos que están posicionados.

Otra cosa que le puede molestar es que todos los elementos posicionados actúan como "contenedores" de índice z. Por lo tanto, si su <div> pasa a ser anterior en el documento y en otro contenedor posicionado, puede estar ligado a la capa de índice z de su antecesor, por lo que no puede escapar y mostrarse encima del <canvas>. Si este es el caso, tendrá que volver a escribir ligeramente su CSS o reorganizar su página para que el <div> se encuentre en un buen lugar.

Answer 5

A veces esto puede ocurrir en mis experiencias. No sé lo que está sucediendo en la API de lienzo html5. Si desea dibujar alguna figura debajo del elemento div, use la etiqueta img, que se muestra a continuación.

--- este código de ejemplo está escrito con prototype.js (1.6) ---

< -javascript-código->

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> 

Por cierto, mi página de inicio está escrita en japonés.

Answer 6

Me quedé con esto por un tiempo y finalmente lo puse a funcionar después de configurar z-index de lo que quiero en segundo plano a -1 (frente a un número positivo).