Question

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规范中遗漏了哪些内容，说这是正确的？

作为一个注释，请不要问我为什么要使用边距而不是固定/绝对/等...替代品。我需要利润。

Answer 1

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

#d {position:relative;}

或

#d {position:absolute;}

Answer 2

我最近发生了这种情况，而不是改变它的布局方式，我从div切换到span使用display:inline-block。

适用于Firefox / Chrome / Safari。尚未在IE中测试过。

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

Answer 4

添加位置：相对; （或绝对）#d似乎适用于chrome和firefox。如果你问我，不知道为什么。这对你有好处吗？

Answer 5

我已经阅读了你的问题，我明白你不想使用职位......无论你必须使用职位来让z-index工作。 position：相对字面意思在这种情况下什么都不做，保存你要求的东西。这是一个解决方案，虽然它依赖于位置：相对 http://jsfiddle.net/jalbertbowdenii/Ar6Sh/

在<canvas> </canvas> </div>上显示<div>

5 个答案: