En html 5, comment faire pour le positionnement d'un élément div sur le dessus d'un élément canvas?

Quelqu'un peut m'aider: je suis en train de mettre un div (disons 10px par 10px) de l'élément sur le dessus (à l'avant) et d'un élément canvas (dire 500px par 500px) en html. J'ai essayé de changer le z-index de chaque, en vain. Quelqu'un a une idée, ou est-ce une de ces choses que vous ne pouvez pas vraiment faire? Je sais déjà comment faire de positionnement absolu et tout et tout, l'élément div juste se tient à l'arrière-plan de l'élément canvas. J'ai besoin d'un moyen de l'amener à l'avant et à l'élément canvas à l'arrière.

Merci!

InformationsquelleAutor Unraised | 2010-04-20
  1. 12

    Le moyen de positionnement absolu fonctionne, c'est que, en général, les éléments qui sont plus haut dans le code sont derrière des éléments qui sont plus tard dans le code. De modification que vous avez fait de l'utilisation de z-index. Notez, cependant, que le z-index ne fonctionne que sur les éléments qui sont positionnés.

    Une autre chose qui peut être le déclenchement de vous, c'est que tous éléments positionnés loi comme le z-index "conteneurs". Donc, si votre <div> arrive à être plus haut dans le document et dans un autre conteneur positionné, il peut être lié à la z-index de la couche de son ancêtre, et ne peut donc pas échapper à et l'affichage sur le dessus de la <canvas>. Si c'est le cas, vous devrez vous à un peu de réécrire votre CSS ou réorganiser votre page afin que les <div> est dans un bon endroit.

    • Même question que l'OP: "Notez, cependant, que le z-index ne fonctionne que sur les éléments qui sont positionnés." c'était tout ce dont j'avais besoin. Merci @Xanthir
    InformationsquelleAutor Xanthir
  2. 2

    Qui dépend de l'endroit où vos éléments.

    À utiliser les z-index, vous devez définir la position relative ou absolue.

    InformationsquelleAutor Emmanuel
  3. 1

    Je ne semble pas avoir le même problème. J'ai créé un exemple de toile /div comme vous êtes en train de parler à JSbin: http://jsbin.com/adowo/edit

    Est-ce que vous cherchez? Ou ai-je raté quelque chose?

    • Peut être un problème de navigateur? Cela peut aider si l'OP spécifié qu'ils utilisent...
    • J'ai essayé avec Firefox et Chrome... je ne pense pas que IE prend en charge la toile donc je ne pense pas qu'ils essaient, mais ouais, plus d'info serait utile.
    InformationsquelleAutor RussellUresti
  4. 1

    Parfois, cela peut se produire dans mes expériences.
    Je ne sais pas ce qui se passe dans le html5 canvas API.
    Si vous voulez dessiner une figure en vertu de l'élément div, utilisez img tag au lieu de cela, énumérées ci-dessous.

    --- cet exemple de code est écrit avec prototype.js(1.6) ---

    <-javascript-code->

    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>

    Par la voie, ma page d'accueil est écrit en Japonais.

    InformationsquelleAutor mike_neck
  5. 0

    Je futzed avec ce pour un peu de temps et finalement réussi à le faire fonctionner après la définition de z-index de la chose que je veux dans le fond de -1 (contre un nombre positif).

    InformationsquelleAutor galactikuh
  6. -7

    XHTML

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

    Le Style Css

    #canvas { height: 500px; width: 500px; overflow: hidden; }
#topelement { height: 10px; width: 10px; float: left; }
    • Vous totalement méconnaître la question, qui est d'environ <canvas>, pas quelque chose avec un id de "toile".
    InformationsquelleAutor Nick Rassette