固定CSS位置導致內容重疊

我正在製作一個靜態網站，我將頂部上的導航菜單固定爲固定標題部分。固定CSS位置導致內容重疊

問題在於，無論我在它旁邊添加什麼內容，都會在菜單頂部重疊。

向內容添加相對位置的方式相同。

將位置設置爲絕對值顯然是唯一有效的工作，但我必須添加大量邊距，這會使網站太不穩定。

這是我的菜單CSS，我沒有任何主要的CSS，因爲這個問題。

nav { 
    position: fixed; 
    top: 0; 
    background:none; 
    z-index:10000; 
    width:100%; 
    font-size:34px; 
    transition: all 0.5s; 
} 

nav.navScroll { 
    background: #013D5F; 
    font-size:20px; 
    transition: all 0.5s; 
    color: #fff; 
} 

img.logo { 
    float:left; 
    display:none; 
    transition: all 0.5s; 
} 

img.logoScroll { 
    display:inline; 
    width:50px; 
    padding:5px; 
    transition:all 0.5s; 
} 

div.menu { 
    text-align:center; 
} 

div.menuScroll { 
    float:right; 
} 

ul { 
    padding-left:0; 
    margin-left:0; 
} 

li.nav { 
    display:inline; 
    text-decoration:none; 
    padding-left:15px; 
} 

    li.nav a { 
     list-style-type: none; 
     text-decoration:none; 
     color: white; 
     font-weight:400; 
    } 

    li.nav a:hover { 
     color: #FFD634; 
     transition: 1.2s; 
    } 

.navScroll li.nav a { 
    color:#fff; 
} 

.navScroll li.nav a.selected { 
    color: #FFD634; 
}

來源

2017-05-18 user3925163

也發佈您的HTML。 –

'問題出現了，無論我在它旁邊添加什麼內容，它都會在菜單頂部重疊。「 - 是的，因爲position：fixed將元素排除在流之外 - 爲body添加頂部邊距，這是相同的數量作爲固定元素的高度 - 因爲它是一個靜態網站，這應該不難做 –

讓JSfiddle去...你的問題不是很清楚 - 或者說，你對HTML和CSS的舒適程度是不清楚 - 所以（我）很難理解你的問題。：）https://jsfiddle.net/sheriffderek/93us6723/ – sheriffderek

Jaromanda X正確表示固定位置元素不在流動中。您必須爲頁面正文或主容器添加一個與您的導航元素高度相等的頁邊距。你的'z-index：10000'將阻止任何滾動元素掩蓋您的導航，只要沒有給出更高的Z-index;）

來源

2017-05-19 01:15:15 Angrysheep

固定CSS位置導致內容重疊

回答

相關問題