CSS 画布和导航栏定位

CSS canvas and navigation bar positioning

本文关键字：定位 导航 CSS      更新时间：2023-09-26

我有一个导航栏，它在顶部固定位置，还有一个画布。画布的顶部隐藏在导航栏后面。我不想让画布位置绝对化。我必须将画布放在导航栏下方并水平位于中心。为了居中，我把它放在标签中心>，但我无法在导航栏下方获得它，我该如何完成它？我的样式表：

 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>

将填充顶部设置为主体。并且不要使用center标签，它已被弃用。它 http://jsfiddle.net/soov7k2k/有效。您可能忘记正确放置导航栏！ position: fixed是工作的一半。您需要将top:0和left:0添加到导航栏，否则它不起作用。看到小提琴。

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

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

如果没有它，默认情况下，代码中后面的元素在结构上会更高。

相关文章：