如何在不添加填充的情况下修改标题？

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规则。