在<canvas>上显示<div>

Mon*_*der 10 javascript css browser html5 canvas

Firefox和Chrome中存在的问题是我有一个带有纯色背景的画布,以及一个带有纯色背景颜色/图像的div.div被限制在画布顶部.div不会显示在画布上.一个有趣的注意事项是,如果div中有文本,它将正确显示.这意味着它是两个浏览器中的浏览器错误.以下是一些想要尝试的人的代码.

<!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>
Run Code Online (Sandbox Code Playgroud)

那么,有人有任何变通方法吗?或者我在HTML5规范中遗漏了哪些内容,说这是正确的?

请注意,请不要问我为什么要使用边距而不是固定/绝对/等等替代品.我需要利润.

Mos*_*ses 18

这只能通过应用样式来修复:

#d {position:relative;}
Run Code Online (Sandbox Code Playgroud)

要么

#d {position:absolute;}
Run Code Online (Sandbox Code Playgroud)

  • 这很不幸,因为绝对和相对定位确实是你唯一的选择. (21认同)
  • 请在回答之前阅读问题.我说我不想要绝对或相对定位. (3认同)
  • 实际上,您不必相对定位元素,而只需添加属性。只要不添加`top`,`right`等属性,div的位置就不会改变。 (2认同)