###前提・実現したいこと
canvasの上に背景が白いdiv要素を重ねて表示したいのですがposition:absoluteにすると表示されません。
###発生している問題・エラーメッセージ
エラーはありません。
###該当のソースコード
html
1<div id="ofallparent" style="position:relative"> 2<canvas id="allparent"></canvas> 3</div>
javascript
1function monitorappear() { 2 var topzahyo = (hei*13)/14; 3 var leftzahyo = (wid/2) - (wid/11); 4 var widdis = wid/7; 5 var heidis = hei/7; 6 var topto = (hei*11)/14; 7 var area = document.getElementById("ofallparent"); 8 var divv = document.createElement("div"); 9 $("#ofallparent").append('<div id="monitor"></div>'); 10 $("#monitor").css({'top':topzahyo+'px','left':leftzahyo+'px', 'width"':widdis+'px', 'height':'0px', 'background-color':'#ffffff', 'position':'absolute'}); 11 $("#monitor").animate({height:heidis+'px', top:topto+'px'}); 12 }
以下問題とは関係のない部分を取り去った最小限の追記HTMLコードになります。
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4<title>Title</title> 5<link rel="stylesheet" type="text/css" href="truth.css"> 6<script type="text/javascript" src="jquery-3.2.1.min.js"></script> 7<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> 8</head> 9<body> 10<div id="ofallparent" style="position:relative"> 11<canvas id="allparent"></canvas> 12</div> 13<script type="text/javascript"> 14window.onload = function(){ 15 var stage = new createjs.Stage('allparent'); 16 var canvas = document.getElementById('allparent'); 17 var wid = stage.canvas.width = screen.availWidth; 18 var hei = stage.canvas.height = screen.availHeight; 19 if (canvas && canvas.getContext) { 20 var ctx = canvas.getContext('2d'); 21 ctx.beginPath(); 22 ctx.fillStyle = 'rgb(0, 0, 0)'; 23 ctx.fillRect(0, 0, wid, hei); 24 ma(); 25 } 26 function ma() { 27 var topzahyo = (hei*13)/14; 28 var leftzahyo = (wid/2) - (wid/11); 29 var widdis = wid/7; 30 var heidis = hei/7; 31 var topto = (hei*11)/14; 32 $("#ofallparent").append('<div id="monitor"></div>'); 33 $("#monitor").css({'top':topzahyo+'px','left':leftzahyo+'px', 'width"':widdis+'px', 'height':'0px', 'background-color':'#ffffff', 'position':'absolute'}); 34 $("#monitor").animate({height:heidis+'px', top:topto+'px'}); 35 } 36} 37</script> 38</body> 39</html>
css
1body { 2 margin-left:0px; 3 margin-top:0px; 4 margin-right:0px; 5 margin-bottom:0px; 6}
###試したこと
javascript
1var area = document.getElementById("ofallparent"); 2 3var divv = document.createElement("div"); 4area.appendChild(divv);
上記を試したりしました。
###補足情報(言語/FW/ツール等のバージョンなど)
使用しているjquery:jquery-3.2.1.min.js
position:relativeにすると、重ならず、下に表示されます。
monitorappear()は別の関数から呼ばれるようになっています。
回答1件
あなたの回答
tips
プレビュー