在 <canvas> 上显示 <div>答案

【问题标题】：Displaying a <div> over a <canvas>在 <canvas> 上显示 <div>
【发布时间】：2011-04-28 04:41:22
【问题描述】：

在 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>

那么，有人有任何解决方法吗？还是我在 HTML5 规范中遗漏了一些说明这是正确的？

请注意，请不要问我为什么要使用边距而不是固定/绝对/等...替代方案。我需要边距。

【问题讨论】：

标签： javascript css browser html canvas

【解决方案1】：

这件事最近发生在我身上，我没有改变布局，而是从div 切换到使用span 和display:inline-block。

适用于 Firefox/Chrome/Safari。没有在 IE 中测试过。

【讨论】：

【解决方案2】：

好吧，我已经阅读了您的问题，并且我了解您不想使用位置......无论您必须使用位置来让 z-index 工作。 position:relative 在这种情况下实际上什么都不做，保存你所要求的。这是一个解决方案，尽管它依赖于 position:relative http://jsfiddle.net/jalbertbowdenii/Ar6Sh/

【讨论】：

【解决方案3】：

使用以下代码，希望对您有所帮助：

 <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>

【讨论】：

【解决方案4】：

这只能通过应用样式来解决：

#d {position:relative;}

或

#d {position:absolute;}

【讨论】：

请在回答前阅读问题。我说我不想要绝对或相对定位。
这很不幸，因为绝对和相对定位确实是您唯一的选择。
您实际上不必使用相对定位来定位元素，您只需添加属性即可。只要您不添加top、right 等...属性，您的 div 的位置就不会改变。

【解决方案5】：

添加位置：相对；（或绝对）到 #d 似乎在 chrome 和 firefox 中都有效。不知道为什么，如果你问我。这对你有好处吗？

【讨论】：

请在回答前阅读问题。我说我不想要绝对或相对定位。