Anzeigen ein <div> ein <canvas>

Das problem besteht sowohl in Firefox und Chrome, ist, dass ich ein Bild mit einem einfarbigen hintergrund, und ein div mit einer Hintergrundfarbe/Bild. Das div-Element mit margin-up über die Leinwand. Das div wird nicht angezeigt, der über die Leinwand. Ein interessanter Hinweis ist, dass, wenn es text innerhalb des div, wird es richtig angezeigt. Dies würde bedeuten, es ist ein browser-bug... in beiden Browsern. Hier ist ein code für Menschen, die wollen, es zu versuchen.

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

Also, jemand irgendwelche workarounds? Oder ist es etwas, dass ich verpasst in der HTML5-Spezifikation sagt, dass das richtig ist?

Als Hinweis, bitte nicht Fragen, warum ich wollen, verwenden Margen anstelle von fixen/absoluten/etc... alternativen. Ich brauche Margen.

InformationsquelleAutor Moncader | 2010-10-20
  1. 18

    Diese können nur behoben werden, indem Sie das Format anwenden: 

    #d {position:relative;}

    oder 

    #d {position:absolute;}
    • Bitte Lesen Sie die Frage vor der Beantwortung. Ich sagte, ich will nicht absolute oder relative Positionierung.
    • Das ist schade, denn die absolute und die relative Positionierung sind wirklich die einzigen Optionen, die Sie haben.
    • Sie eigentlich nicht haben, um die Positionen der Elemente mit relativer Positionierung, Sie müssen nur die property hinzufügen. Die position des div wird sich nicht ändern, solange Sie nicht noch eine top, right usw... - Attribut.
    InformationsquelleAutor Moses
  2. 2

    Dies geschah mir vor kurzem und anstatt Sie zu verändern, wie es angeordnet ist, wechselte ich von div Verwendung einer span mit display:inline-block.

    Funktioniert auf Firefox/Chrome/Safari.
    Noch nicht getestet im IE.

    InformationsquelleAutor Davin
  3. 1

    Verwenden Sie den folgenden code, hoffe es hilft dir:

     <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>
    InformationsquelleAutor Joshi
  4. 0

    Hinzufügen einer position:relative; (oder absolute) zu #d scheint zu funktionieren, in chrome und firefox. Keine Ahnung, warum, wenn Sie mich Fragen. Ist das gut für Sie?

    • Bitte Lesen Sie die Frage vor der Beantwortung. Ich sagte, ich will nicht absolute oder relative Positionierung.
    • Dann können Sie es nicht.
    InformationsquelleAutor Chango
  5. 0

    nun, ich habe deine Frage Lesen, und ich verstehe Sie nicht wollen, um die position zu verwenden....wer Sie verwenden müssen, position zu sein, die z-index zu arbeiten. position:relative ist buchstäblich nichts zu tun, in diesem Fall, speichern Sie, was Sie fordern. hier ist eine Lösung, obwohl es stützt sich auf position:relative
    http://jsfiddle.net/jalbertbowdenii/Ar6Sh/

    InformationsquelleAutor albert
Schreibe einen Kommentar