如何在不添加填充的情況下修改標題？

Question

我想讓我的頭部固定。但是我的標題與我的身體內容重疊。我知道有一種方法可以解決它，添加填充。但對於一些頁面，我必須添加padding-top：20px;併爲另一頁我必須添加填充頂部50px; 此外，爲了響應我必須保持改變填充頂部。任何人都知道如何以動態的方式？

#top-header-wrapper { 
background-color: gray; 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
z-index: 10; 
} 

Answer 1

如果使用與fixed的position值的header元件;正如你已經注意到的那樣，它將位於前面的元素的「頂部」。

使用padding-top屬性是確保以確保您的header並在訴訟元素不是「塊」的內容的一種方式（我們假設它是一個section元素）：

header ~ section { 
    padding-top: 50px; 
} 

和你一樣」 ve說，一個問題是，如果header沒有靜態高度（它可能應該），並且在切換視口大小時，必須更改padding-top值。

個人而言，我不認爲這是一個問題，因爲media queries易於使用。

但是，使用CSS，這是您唯一的選擇。這是使用javascript獲取元素height並將padding-top的另一個元素設置爲第一個元素height，但由於您在詢問css，因此最好的辦法是使用@media規則。