CSS canvas 和导航栏定位

Question

我有一个固定在顶部的导航栏，还有一个 canvas。我的 canvas 的顶部隐藏在导航栏后面。我不想让 canvas 位置绝对化。我必须让我的 canvas 位于导航栏下方和水平中心。为了居中，我把它放在标签中心>，但我无法在导航栏下方找到它，我该如何完成？我的风格 sheet:

 CSS
    #nav{
        position:fixed;
        margin:0px;
        display:block;
        }
    #canvas{
        text-align:center;
        background-color:transparent;
        border: 2px solid black;
        display:block;
        }
    HTML
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href="IV.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <nav>


    <div id = "toolbar_effects">

    <input type="image" src="Icons/imageviewer.svg" width="50" height="50" id="Imageviewer2"class = "s">
    <input type="image" src="Icons/effect-grayscale.svg" width="50" height="50" id="grayscale"class = "s">
    </div>
    </nav>
    <center><canvas id = "canvas" width="600" height="400"><center>
    </canvas>
    </body>
    </html>

Answer 1

在导航 css 中使用 z 索引 https://css-tricks.com/almanac/properties/z/z-index/

默认情况下，代码后面的元素在结构上更高。

Answer 2

将 padding-top 设置为正文。并且不要使用已弃用的 center 标签。它有效 http://jsfiddle.net/soov7k2k/。您可能忘记正确定位导航栏！ position: fixed 是工作的一半。您需要将 top:0 和 left:0 添加到您的导航栏，否则它将不起作用。见 fiddle.

body {
padding-top: 100px;//Or whatever the height of your navbar is.
}

CSS canvas 和导航栏定位

CSS canvas and navigation bar positioning

html

javascript

css

canvas