CSS帆布和导航栏定位

我有一个导航栏，它是固定位置的顶部和一个画布。我的画布顶部隐藏在导航栏后面。我不想让画布位置绝对。我必须将导航栏放置在导航栏下方并水平放置在中央。为了将它放在中心位置，我把它放在了标签中心>中，但我无法在导航栏下面找到它，我怎样才能完成它？我的样式表：CSS中通过在后面的代码在结构上较高的默认元素CSS帆布和导航栏定位

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>

来源

2015-03-13 Shrey Anand

显示您的代码或至少您尝试到目前为止，然后我们可以修复那里的错误。 – jAC 2015-03-13 14:19:15

没有代码我们不能帮你 – arclite 2015-03-13 14:24:31

我已经添加了代码.. – 2015-03-13 20:50:04

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

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

来源

2015-03-13 20:55:41 Michelangelo

将导航栏向下移动100px :(并且画布顶部的100px仍然隐藏在导航栏后面 – 2015-03-13 21:14:07

@ShreyAnand它确实有效，您必须正确地看到导航栏的最新答案 – Michelangelo 2015-03-13 21:27:05

嘿，导航工作！非常感谢:) – 2015-03-13 22:12:26

使用Z指数在您的导航https://css-tricks.com/almanac/properties/z/z-index/

没有这些。

来源

2015-03-13 14:29:02

我不想隐藏我的导航栏，我想把我的画布放在它的下面 – 2015-03-13 19:53:59

只给较高的Z-index导航和较小的画布给。这两个元素都需要被定位为绝对的，固定的或相对的z-索引才能工作。 – 2015-03-14 22:56:30

CSS帆布和导航栏定位

回答

相关问题