固定标题与我的横幅重叠[重复]

Question

我有一个必须保持固定的标题，但它与标题后面的内容重叠。我已经尝试过 position: sticky 但不是真的在寻找那个。

我的标头是动态的，无法为其设置固定高度，因为标头中的徽标必须根据浏览器的大小调整大小。底部：0；不是我要找的。

在英雄类的顶部添加一定百分比的边距对我来说不起作用，因为标题需要适应英雄类而不改变调整大小时之间的空间。

英雄类的位置必须保持相对，因为它里面的内容需要它。

是否有可能不通过javascript执行此操作？

这是我的代码：

header {
width: 90%;
height: auto;
background-color: #D9D9D9;
position: fixed;
top: 0;
z-index: 9999;
}

.hero {
background-image: url(../images/hebiasgrafiek.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 0px;
height: 20%;
position: relative;
border-bottom: 1px solid #FFF;
}

Answer 1

有点奇怪，但您可以复制您的标头代码。固定其中一个。然后另一个只是一个静态块级元素将呈现在固定标题下，并始终将您的内容向下推送正确的数量。

虽然你说你不能使用固定高度，但也许你可以。您只需使用在不同断点处设置为不同高度的固定高度，然后使用定位或边距在相同断点处将内容下推相同距离。