Question

我需要一个简单的链接网站的帮助，我的画布不会放在我的文字后面

我认为问题特别在于我的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/

Answer 1

要更改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;

提醒

更改堆叠顺序意味着将元素物理放置在其他元素的顶部。这意味着您模糊了用户查看和与之交互的能力！在将元素放在其他元素之前要仔细考虑，最好只保留视觉风格。

为什么不能正常工作

您尚未向<canvas>元素应用任何CSS，因此堆叠顺序将默认为元素类型。没有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
}

无法让画布显示在html后面

1 个答案: