Displaying a <div> over a <canvas>_问答_开发者

开发者 https://www.devze.com 2023-01-20 20:54 出处：网络

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:-150开发者_运维知识库px;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.

This can only be fixed by applying the style:

#d {position:relative;}

#d {position:absolute;}

This occurred to me recently and instead of changing how it's laid out, I switched from div to using a span with display:inline-block.

Works on Firefox/Chrome/Safari. Have not tested in IE.

Use the following code, hope it helps you:

 <head>
     <style type="text/css">
          #c{background-color:#000;z-index:-1;position: fixed;}
          #d{background-color:#aa00aa;margin-top:-50px;z-index:0;}
     </style>
     <script type="text/javascript">
         function load() {
             var cntx = document.getElementById("c").getContext("2d");
             cntx.fillStyle = "rgba(255, 200, 200, 1)";
             cntx.canvas.top = "0";
             cntx.canvas.left = "0";
             cntx.fillRect(0, 0, cntx.canvas.width, cntx.canvas.height);

             var obj = document.getElementById("d");
             obj.style.position = "fixed";
             obj.style.top = 50;
             obj.style.left = 0;
         }
     </script>
 </head>
 <body onload="load()">
     <canvas id="c" width="500" height="300"></canvas>
     <div id="d" style="width:500px;height:300px"></div>
 </body>

Adding a position:relative; (or absolute) to #d seems to work in both chrome and firefox. No idea why, if you ask me. Is that good for you?

well i've read your question, and i understand you dont want to use position....whoever you have to use position to get z-index to work. position:relative literally is doing nothing in this case, save what you are requesting. here is a solution, although it relies on position:relative http://jsfiddle.net/jalbertbowdenii/Ar6Sh/