2016-05-21 27 views
3

我需要一個簡單的鏈接網站的幫助和我的畫布不會坐在後面我的文字無法獲得畫布上顯示隱藏HTML

我認爲這個問題是特別是與我的HTML

我沒有確實做了很多與HTML5的畫布,這是一個拙劣的複製粘貼工作:

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

回答

2

要更改HTML元素的堆疊順序,您需要z-index CSS property。將z-index看作元素深度或Z軸的表達式,與HTML文檔中的其他元素相關。 X和Y軸表示元素的左/右和上/下值。

Z-index允許您通過指定一個表示「高度」位置的數字來指定「堆疊順序」。數字越高,該元素將「堆棧」越靠近用戶。所以說了一堆HTML元素的每過這些的z-index值之一:

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

堆疊順序,從最遠到最近的地方,將是:

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

謹慎的字

更改堆疊順序意味着將元素物理放置在其他元素的頂部。這意味着你模糊了用戶查看和與之交互的能力!在將元素放在其他元素之前仔細考慮,最好只保留視覺效果。

爲什麼它不工作

您還沒有應用任何CSS的<canvas>元素,所以堆疊順序將默認的元素類型。沒有CSS干預,HTML元素將永遠不會重疊。

對於canvas元素,這意味着塊級別。您可以閱讀how a canvas element will behave by default以及如何在Mozilla開發者網絡上進行控制。

如果你想改變你的元素的堆疊順序,你需要進行一些更改應用到你的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 
}