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

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像素的情况，内容元素将获得padding-top：50px，并且应该可以解决问题。

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


.content{
  padding-top:50px;
 }

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