В html 5 как расположить элемент div поверх элемента canvas?

Question

Может ли кто-нибудь мне помочь: я пытаюсь поместить элемент div (скажем, 10 на 10 пикселей) поверх (спереди) элемента canvas (скажем, 500 на 500 пикселей) в HTML. Я пытался изменить z-индекс каждого, но безрезультатно. У кого-нибудь есть идеи, или это одна из тех вещей, которые вы не можете сделать на самом деле? Я уже знаю, как сделать абсолютное позиционирование и все такое, элемент div просто висит на заднем плане за элементом canvas. Мне нужен способ перенести его на передний план и элемент холста на задний план.

Спасибо!

Answer 1

Способ абсолютного позиционирования заключается в том, что, как правило, элементы, находящиеся ранее в коде, находятся за элементами, которые находятся позже в коде. Чтобы изменить это, вы действительно используете z-index. Обратите внимание, что z-index работает только с позиционированными элементами.

Другая вещь, которая может сбить вас с толку, заключается в том, что все позиционированные элементы действуют как «контейнеры» z-index. Таким образом, если ваш <div> окажется раньше в документе и в другом позиционированном контейнере, он может быть привязан к слою z-index своего предка и поэтому никогда не сможет выйти и отобразиться поверх <canvas>. Если это так, вам придется либо немного переписать свой CSS, либо переставить страницу так, чтобы <div> находился в хорошем месте.

Answer 2

Это зависит от того, где находятся ваши элементы.

Чтобы использовать z-index, необходимо установить относительное или абсолютное положение.

Answer 3

Иногда это может происходить в моем опыте. Я не знаю, что происходит в html5 canvas API. Если вы хотите нарисовать фигуру под элементом div, используйте вместо этого тег img, указанный ниже.

--- этот пример кода написан с prototype.js (1.6) ---

<- Javascript-код ->

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>

Кстати, моя домашняя страница написана на японском языке.

Answer 4

У меня, похоже, нет такой же проблемы.Я создал образец canvas / div, о котором вы говорите здесь, в JSbin: http://jsbin.com/adowo/edit

Это то, что вы ищете?Или я что-то упустил?

Answer 5

Я немного поработал с этим и, наконец, заставил его работать после установки z-index для того, что я хочу на заднем плане, на -1 (против некоторого положительного числа).

Answer 6

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; }