Header 坚持页面上的其他元素

Question

我目前有一个通过 ejs 导入的 header。我的问题是我的 margin-top 属性不仅影响 page 元素，而且影响 header。我的 css 代码中是否有任何内容导致此问题？

注意：只有我的.page的margin-top属性影响其他样式的header，none

我当前的代码：

header.ejs

<link rel="stylesheet" href="/public/assets/css/header.css">
<header>
    <div class="h-wrapper">
        <div class="watermark">
            <div><%= locals.page %></div>
        </div>
        <ul class="pages">
            <% if ((locals.page).toLowerCase() == 'home') { %> 
                <li><a href="#">Home</a></li>
            <% } else { %> 
                <li><a href="/home">Home</a></li>
            <% } %> 
            <% if ((locals.page).toLowerCase() == 'about') { %> 
                <li><a href="#">About</a></li>
            <% } else { %> 
                <li><a href="/about">About</a></li>
            <% } %> 
        </ul>
    </div>
</header>

header.css

header {
    position: fixed;
    height: 60px;
    width: 100%;
    z-index: 3;
    background-color: rgb(32, 34, 37);
}
header .h-wrapper {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
header .h-wrapper .watermark {
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: 300px;
    margin-top: 17px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
header .h-wrapper .watermark div {
    text-align: center;
    font-size: 15px;
    color: rgb(202, 214, 215);
}

header .h-wrapper .pages {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: auto;
    float: right;
    width: 20%;
    height: 10px;
    margin-top: -13px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
header .h-wrapper .pages li a {
    text-decoration: none;
    font-size: 15px;
    color: rgba(202, 214, 215, 0.8);
}

/* Some media queries that are not relevant for the current screen size */

<!DOCTYPE html>
<html lang="en">

<head>
    <%- include('../includes/head') %> 
    <title>Some_Title</title>
</head>
<style>
    .page {
        display: flex;
        justify-content: center;
        margin: auto;
        margin-top: 20vh;
        width: 90%;
    }
</style>
<body>
    <%- include('../includes/header', { page: 'Test Page' }) %>
    <div class="page">
        // ...
    </div>
</body>

</html>

Answer 1

body{
    position: absolute; 
}

这将解决您的问题。

Header 坚持页面上的其他元素

Header sticking to other elements on the page

html

css

ejs