制作 header 的完美方式

Question

我正在 Laravel 中创建一个 Web 应用程序，并且我有一个 header 元素的模板。我想要做的是让 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;
   }

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

Answer 1

body{
    background-color: #7e797b;
    }
.header{
    background-color: #ffffff;
    width: 100%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
    left:0;
    top:0
   }

<html>
<head>
<body>
 <header class="header">  
    <h1>Header</h1>
 </header>
</body>
</head>
</html>

Answer 2

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

即这里 header 的高度是 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>

制作 header 的完美方式

Perfect way to make a header

html

css

css-position

fixed