Question

我的导航栏位于顶部固定位置，还有一个画布。我的画布顶部隐藏在导航栏后面。我不想让画布位置绝对。我将画布放在导航栏下方和水平中心。为了使它居中，我将它放在标签中心＆gt;中，但是我无法在导航栏下面找到它，我怎样才能完成它？我的样式表：

 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

在导航https://css-tricks.com/almanac/properties/z/z-index/

上的css中使用z索引

默认情况下，默认情况下，代码中较晚的元素的结构较高。

Answer 2

将填充顶部设置为正文。并且不要使用不推荐使用的center标记。它有效http://jsfiddle.net/soov7k2k/。您可能忘记正确定位导航栏了！ position: fixed是工作的一半。您需要将top:0和left:0添加到导航栏中，否则它将无效。看小提琴。

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

CSS画布和导航栏定位

2 个答案: