Размещение <div>в пределах <canvas>

Question

Я беру div в элементе canvas, например:

<canvas>
    <div></div>
</canvas>

Здесь они оба имеют высоту и ширину. Но здесь я не вижу div!

Разве нельзя взять div или p в пределах canvas?

Answer 1

Вы не можете размещать элементы внутри холста (и отображать их оба); они отображаются только в том случае, если браузер не распознает элемент canvas.

Если вы хотите расположить элементы в той же области, что и холст, вот одна из многих техник, которая позволит вам это сделать:

HTML

<div id="canvas-wrap">
  <canvas width="800" height="600"></canvas>
  <div id="overlay"></div>
</div>

CSS

#canvas-wrap { position:relative } /* Make this a positioned parent */
#overlay     { position:absolute; top:20px; left:30px; }

Вот еще один метод, который позволяет содержимому div течь нормально и делает холст фоном для контента:

CSS

#canvas-wrap { position:relative; width:800px; height:600px }
#canvas-wrap canvas { position:absolute; top:0; left:0; z-index:0 }