Displaying a
over a

Question

The problem, which exists in both Firefox and Chrome, is that I have a canvas with a solid background, and a div with a solid background color/image. The div is margined up over top of the canvas. The div does not display over the canvas. An interesting note is that if there is text inside the div it will properly get displayed. This would mean it's a browser bug... in both browsers. Here is some code for people that want to try it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        #d{background-color:#111;margin-top:-150px;z-index:999999;}
    </style>
    <script type="text/javascript">
        function load() {
            var c = document.getElementById("c").getContext("2d");
            c.fillStyle = "rgba(255, 200, 200, 1)";
            c.fillRect(0, 0, c.canvas.width, c.canvas.height);
        }
    </script>
</head>
<body onload="load()">
    <canvas id="c" width="500" height="300"></canvas>
    <div id="d" style="width:500px;height:300px"></div>
</body>
</html>

So, anybody have any workarounds? Or is there something that I missed in the HTML5 spec that says this is correct?

As a note, please do not ask why I want to use margins instead of fixed/absolute/etc... alternatives. I need margins.

Moses · Accepted Answer

This can only be fixed by applying the style:

#d {position:relative;}

or

#d {position:absolute;}

Displaying a <div> over a <canvas>

Tags:

javascript

html

browser

css

canvas

Moncader

1 Answers

Moses

Recent Activity

Donate For Us