kann nicht erhalten Leinwand hinter html zu zeigen

ich mit einer einfachen Link-Seite und meine Leinwand hinter meinem Text wird nicht sitzen Hilfe benötigenkann nicht erhalten Leinwand hinter html zu zeigen

denke ich, das Problem speziell mit meinem html ist

Ich habe nicht wirklich viel mit html5 Leinwänden getan und das war eine verpfuschte Kopie Paste Job:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta content="IE=edge" http-equiv="X-UA-Compatible"> 
 
    <title>jetbrains.xyz</title> 
 
    <link href="main.css" rel="stylesheet"> 
 
    <script src="main.js"></script> 
 
</head> 
 
    
 
<body> 
 
    <canvas id='c'></canvas> 
 
    <div class="mhm"> 
 
    <div class="centered"> 
 
     
 

 
       
 
        <h1>⎳⎳⎳</h1> 
 
       
 

 
     
 
    </div> 
 
    
 
    <ul class="bmenu"> 
 
     <br /> 
 
     <li> 
 
      <a href="http://steamcommunity.com/id/-sera/">sera</a> 
 
     </li> 
 
     <br /> 
 
     <li> 
 
      <a href="">zonk</a> 
 
     </li> 
 
     
 
    </ul> 
 
    </div> 
 
    
 
    
 
     
 
</body> 
 
     
 
</html>

https://jsfiddle.net/83c7npck/

Quelle

2016-05-21 Thomas Reed

Um die Stapelreihenfolge von HTML-Elementen zu ändern, benötigen Sie die z-index CSS property. Stellen Sie sich den Z-Index als Ausdruck der Elementtiefe oder Z-Achse im Verhältnis zu anderen Elementen im HTML-Dokument vor. Die X- und Y-Achse geben die Werte links/rechts und oben/unten des Elements an.

Mit dem Z-Index können Sie eine 'Stapelreihenfolge' angeben, indem Sie eine Nummer zuweisen, die eine 'Höhenposition' angibt. Je höher die Zahl, desto "näher" an den Benutzer wird dieses Element stapeln. So sagt ein paar HTML-Elemente hatte jeder dieser z-Index-Werte:

z-index: 1; 
z-index: 999; 
z-index: -10; 
z-index: 50;

die Stapelreihenfolge, vom am weitesten weg zum nächsten, wird sein:

z-index: -10; 
z-index: 1; 
z-index: 50; 
z-index: 999;

Ein Wort der Vorsicht

Wenn Sie die Stapelreihenfolge ändern, werden die Elemente physisch über anderen Elementen platziert. Das bedeutet, dass Sie die Fähigkeit des Benutzers, sie anzuzeigen und damit zu interagieren, verdunkeln! Denken Sie sorgfältig nach, bevor Sie Elemente hinter anderen platzieren, es ist am besten nur dem visuellen Flair vorbehalten.

Warum es

nicht funktioniert haben Sie keine CSS auf Ihre <canvas> Elemente angelegt, so dass die Stapelreihenfolge zu dem der Elementtyp nicht erfüllt. Ohne CSS-Intervention werden sich HTML-Elemente niemals überschneiden.

Für ein canvas Element bedeutet das Blockebene. Sie können auf how a canvas element will behave by default lesen und wie Sie es auf dem Mozilla Developer Network steuern.

Wenn Sie die Stapelreihenfolge der Elemente ändern mögen, müssen Sie ein paar Änderungen an der CSS anwenden:

canvas { 
    position: absolute; // this removes the element from the document flow and allows other elements to float over/under it 
    z-index:0; // alternately, we can simply make this '-1' to sit behind everything... 
    width: 100px; // just to make it clearly visible when it's working, very handy! 
    height:100px; 
    background-color: red; 
} 

div.mhm { 
    position:relative; // z-index only works if a position is set to relative or absolute 
    background-color: rgba(0,0,238,0.5); 
    z-index:10; // as long as this value is higher than that of the canvas' z-index, it will appear on top 
}

Quelle

2016-05-22 02:28:05 Timmah

kann nicht erhalten Leinwand hinter html zu zeigen

Antwort

Verwandte Themen