I make a website with DOM structure like this:
<body>
<div><canvas id="cv"></canvas>
<script>
..some scripts with function and methods to make multiple canvas..
</script>
</div>
<p>lorem ipsum</p>
</body>
the problem is that the “lorem ipsum” paragraph always appear behind the canvas
I cannot make it appear after the canvas or at least after the , which is supposed to be like that,
on the script I use “createElement” and “appendChild” method to make multiple canvas, and I append the new canvases in the div tag
any idea to make the paragraph appear on below?(after the canvases not behind)
The complete page more or less have the same structure like this:
<html>
<body>
<div id="layer">
<canvas id="myCanvas" width="400" height="300" style="border:2px solid #c3c3c3;position:absolute;left:5px;top:5px">Your browser does not support the canvas element.</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
var id=document.createAttribute("id");
id.nodeValue="test";
var cs=document.createElement("canvas");
document.getElementById("layer").appendChild(cs).setAttributeNode(id);
document.getElementById("test").style.position="absolute";
document.getElementById("test").style.left="7px";
document.getElementById("test").style.top="7px";
document.getElementById("test").width="100";
document.getElementById("test").height="180";
document.getElementById("test").style.border="1px solid";
</script>
</div>
<p>dssdsdsds dsds vdok fekof efienife fienfie fkenfke fkeinf ekfine</p>
</body>
</html>
Don’t absolutely position elements if you want other elements to flow around them. If you really need absolute positioning, then position the container that holds everything that you want to stay together.