- ベストアンサー
２つの図を重ねて表示したい
- HTMLとJavaScriptの初心者ですが、*.pngの図とcanvasに描いた図を重ねて表示したいです。しかし、canvasに描いた図が*.pngに隠れて表示されません。
- コーディングの中で直線を引く部分で、figure.pngと重なる部分が表示されません。どのようにすれば表示されるようになるでしょうか。
- figure.pngとcanvasに描かれた図を重ねて表示する方法を教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
canvasは(Flow content,Phrasing content,Embedded content.Embedded content)で、sectioningやgroupingコンテントではない(HTML4.01で言うところのインライン要素な)ので、必ず<p>などで囲む必要があります。 それはさておき、画像を含むdiv要素(pで良いと思いますが・・)にposition:absoluteが指定されていますから、指定されていないstaticな要素から独立して上に乗ります。 canvasを、sectioningコンテントかgroupingコンテント(p,figure,aside,sectionなど)に入れて、それもabsoluteすると良いでしょう。その際、z-indexを使うならソース上の出現順位には関わらず、上下(前後)を指定できます。 HTML5は、HTML4.01より文書構造をきちんとマークアップすることが求められます。まず、それをしっかり身につけないと、先に勧めませんよ。 <figure class="menue"> <p class="backImage"><img></p> <p class="overCanvas"><canvas></p> </figure> figure.manue{position:absolute;top:20px;left:20px;width:500px;height:500px;margin:0 auto;} figure.manue p.backImage{margin:0;} figure.menue p.overCanvas{position:absolute;top:0;left:0;}
その他の回答 (1)
透過は？
お礼
コメントをお寄せいただきありがとうございました。
お礼
懇切なご回答をお寄せいただきありがとうございました。あちこちのサイトや書籍から利用できそうなものを引っ張り出してつぎはぎでやっていて、貴殿のご回答もよく理解できない状態です。理解できるよう頑張ります。質問の件ですが、その後いろいろ利用して何とか所定の目的を果たすことができました。