始终将徽标/标题保持在页面顶部

Question

所以我试图在页面顶部保留一个徽标/我的标题。

我已经尝试过position: fixed; z-index: 9999; top: 0; left: 0;、left: 40%; 之类的方法，以便将我的徽标保持在页面中间。

我得到的是这样简单的东西：

<div style="text-align:center;">
     <a href="/"><img src="/img/logo.png" style="max-height:100px;"/></a><br/>
</div>

然后我只是将它包含在另一个页面上，我想在其中使用它

<?php include 'header.php'; ?>

如前所述，我尝试改变

<div style="text-align:center;">

到

<div style="text-align:center; position: fixed; z-index: 9999; top: 0; left: 40%;">

但是：这里发生的情况是，标题位于页面顶部的其余部分上方，因此前 x 个像素不可见，因为标题位于其顶部。

所以我真正需要的是首先将页眉放在页面顶部（就像让页面的其余部分首先在页眉下方）并且在滚动时，页眉必须变为fixed.. ..

我怎样才能做到这一点？我希望你明白我的意思....PS：我也在使用 Bootstrap，如果这有助于实现这一点。

Answer 1

当你给一个元素添加位置固定和/或绝对位置时，这意味着该元素将离开自然流动，现在它属于与所有元素都与自然流动的层无关的“层”文件。

这是一个很棒的功能，因为现在您可以将这些元素放置在任何地方，而无需担心页面的其余部分。

那么，关于你的情况。你选对了位置，固定的。现在它上面的元素看不到它，您必须手动将此标题元素的高度添加为边距和/或填充到下一个元素的顶部。

例如，如果您有以下情况：

    <div class="header"></div>
   <div class="content"></div>

重复你所做的添加一个固定到标题的位置，并考虑到它的高度是 50 px，内容元素会得到一个 padding-top:50px，它应该可以解决问题。

.header{
   position:fixed;
   top:0;
   height:50px;
 }


.content{
  padding-top:50px;
 }

我建议不要使用内联样式并保持格式