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帆布和導航欄定位

回答

相關問題