は、私は、単純なリンクサイトを支援し、私のキャンバスは文句を言わない 私は持っていない が、私は問題が私のhtmlと特異的だと思う私のテキストの後ろに座っている必要があるHTML

の後ろに表示するキャンバスを取得できません本当にHTML5のキャンバスに多くを行って、これはしくじっコピーペースト仕事だった：は、私は、単純なリンクサイトを支援し、私のキャンバスは文句を言わない 私は持っていない が、私は問題が私のhtmlと特異的だと思う私のテキストの後ろに座っている必要があるHTML

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

出典

2016-05-21 Thomas Reed

HTML要素の積み重ね順序を変更するには、z-index CSS propertyが必要です。 z-索引は、HTML文書の他の要素との関係で、要素の深さまたはZ軸の表現と考えることができます。 X軸とY軸は要素の左右の値と上下の値を表します。

Z-indexでは、「高さ」の位置を示す数字を割り当てることで、「積み重ね順」を指定できます。数字が大きいほど、要素が積み重なるユーザーに「近く」なります。だから、HTML要素それぞれの束は、これらのzインデックス値のいずれかを持っていたと言う：離れて最も近い遠いから、

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

積層順序を、次のようになります。

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

注意の言葉

積み重ね順序を変更すると、要素を他の要素の上に物理的に配置することを意味します。これは、ユーザーがそれらを表示したり操作したりする能力を不明瞭にしていることを意味します。要素を他の要素の背後に配置する前に慎重に考えてください。視覚的な感覚のために最適です。

なぜそれがあなたの<canvas>要素に任意のCSSを適用していないので、積層順序は、要素型のものをデフォルトとします

を働いていません。 CSSの介入がなければ、HTML要素は重複しません。

canvas要素の場合、ブロックレベルを意味します。 how a canvas element will behave by defaultを読んだり、Mozilla Developer Networkでそれを制御する方法があります。

あなたの要素の重なり順を変更したい場合は、あなたのCSSにいくつかの変更を適用する必要があるだろう：

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 
}

出典

2016-05-22 02:28:05 Timmah

は、私は、単純なリンクサイトを支援し、私のキャンバスは文句を言わない</p> <p>私は持っていない</p> <p>が、私は問題が私のhtmlと特異的だと思う私のテキストの後ろに座っている必要があるHTML

答えて

は、私は、単純なリンクサイトを支援し、私のキャンバスは文句を言わない</p> <p>私は持っていない</p> <p>が、私は問題が私のhtmlと特異的だと思う私のテキストの後ろに座っている必要があるHTML

答えて

関連する問題