html - 制作标题的完美方法

Question

我正在 Laravel 中创建一个 Web 应用程序，并且我有一个用于 header 元素的模板。我想要做的是将页眉固定在顶部。我有以下代码可以做到这一点:

    .header{
    background-color: #ffffff;
    width: 100%;
    height: 10%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
   }

但是，页眉出现在页面下方的某个位置，我的 margin-top 到其他元素也无法正常工作。那么，如何使 header 固定在顶部并仍然使所有其他样式有效？谢谢

Answer 1

当您为固定元素指定高度时，可能会出现重叠问题，因为这种情况会排斥标题中的其余内容。

即，此处标题的高度为 50px，因此通过为内容提供 margin-top:50px; 将其从内容中排斥。

当你使用 position:absolute; 或 position:fixed; 时使用 top, left, right, bottom 提到你想要的位置

试试这个

    .header{
        background-color: #ffffff;
        width: 100%;
        min-height: 50px;
        display: flex;
        /*padding: 0.2em 0.2em 0.2em 0.2em;*/
        font-family: "Viga";
        border: none;
        position: fixed;
        top:0;
        left:0;
       }
       
    body{background:red; height:7000px;}
    .content{color:#fff; margin-top:50px;}

 <header class="header">
 <p>Header lays here!</p>
 </header>
 <div class="content">
 <h1>Content heading</h1>
 <p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
 </div>