css固定标头固定段

Question

我给出了标头的固定属性，但是独立的部分受到它的影响。

​

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 40px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

 <header>
        <a href="#" class="logo">logo</a>
        <ul>
            <li>sdsdsd</li>
        </ul>
    </header>
    
    <section>
        adsdsadsdf
    </section>

​

Answer 1

这是一个非常常见的问题，定位标题或导航栏在一个网站。

问题是，position: fixed属性将元素从文档流中取出，它下面的任何内容都会被拉到元素后面。

解决此问题的一种方法是将margin-top属性添加到标题下面的部分。这会把这部分弄下来。

其他方法(推荐的方法)是将position: sticky添加到标头，而不是position: fixed。这在很大程度上将与position: fixed一样工作，但它不会从文档流中弹出元素。

最后的代码如下所示：

​

header{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 40px ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

<header>
  <a href="#" class="logo">Logo</a>
  <ul>
    <li>List Item</li>
  </ul>
</header>
    
<section>
  Section Area
</section>

​

如果你想看看这个话题，凯文·鲍威尔有一篇很棒的文章-- https://www.kevinpowell.co/article/positition-fixed-vs-sticky/