css HTML内容位于导航栏顶部

我的html内容出现在导航栏顶部时遇到问题，即使我将其包含在{%block content%}中也是如此这是我的基本模板

<!DOCTYPE html>
{% load static %}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href='{% static "css/styles.css" %}'>
</head>

<body>
{% include 'navbar.html'%}

    {% block content %}

    {% endblock %}
    <script type="text/javascript" src="js/script.js"></script>
</body>

</html>

这是我的导航栏

<div>
    <header>
        <a href="#" class="logo"> <i class="ri-home-2-fill"></i><span>LOGO</span></a>
        <ul class="navbar">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Soon</a></li>
        </ul>
        <div class="main">
            <a href="#" class="user"><i class="ri-nurse-fill"></i>Sign in</a>
            <a href="#">Register</a>
            <div class="bx bx-menu" id="menu-icon"></div>
        </div>
    </header>
    </div>

这是我的应用程序的一个页面

{% extends 'main.html'%}
{% block content %}
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
{% endblock %}

这也是我的css文件

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}

:root {
    --bg-color: #B8E2FE;
    --text-color: #fff;
    --main-color: #008BB0;
}

body {
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color)
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    padding: 28px 12%;
    transition: all .50s ease;
}

.logo {
    display: flex;
    align-items: center;
}

.logo i {
    color: var(--main-color);
    font-size: 28px;
    margin-right: 3px;
}

.logo span {
    color: var(--main-color);
    font-size: 1.7rem;
    font-weight: 600;
}

.navbar {
    display: flex;
}

.navbar a {
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
    padding: 5px 0;
    margin: 0px 30px;
    transition: all 0.50s ease;
}

.navbar a:hover {
    color: var(--main-color);
}

.navbar a.active {
    color: var(--main-color)
}

.main {
    display: flex;
    align-items: center;
}

.main a {
    margin-right: 25px;
    margin-left: 10px;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.50s ease;
}

.user {
    display: flex;
    align-items: center;
}

.user i {
    color: var(--main-color);
    font-size: 28px;
    margin-right: 7px;

}

.main a:hover {
    color: var(--main-color);
}

#menu-icon {
    font-size: 35px;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10001;
    display: none;
}

@media (max-width: 1280px) {
    header {
        padding: 14px 2%;
        transition: .2s;
    }

    .navbar a {
        padding: 5px 0;
        margin: 0px 20px;

    }
}

@media (max-width: 1090px) {
    #menu-icon {
        display: block;
    }

    .navbar {
        position: absolute;
        top: 100%;
        right: -100%;
        width: 270px;
        height: 29vh;
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all 0.50s ease;
    }

    .navbar a {
        display: block;
        margin: 12px 0;
        padding: 0px 25px;
        transition: all 0.50s ease;
    }

    .navbar a:hover {
        color: var(--text-color);
        transform: translateY(5px);
    }

    .navbar a.active {
        color: var(--text-color);
    }

    .navbar.open {
        right: 2%;

    }
}

这是我得到的，真的很感激帮助，因为我似乎找不到哪里的问题（https://i.stack.imgur.com/0ehKg.png）

position: fixed使标题固定在视区中，并将其从文档流中取出（有关详细信息，请参阅MDN）。因此，标题下方的内容将呈现为不存在。快速修复方法是将position: fixed;替换为position: sticky;，但标题将随内容滚动。更好的解决方案是添加：position: sticky到父div，按照下面标记的代码。当滚动时，内容会出现在下面，但是你可以通过给你的标题一个背景颜色来修复这个问题。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}

:root {
    --bg-color: #B8E2FE;
    --text-color: #fff;
    --main-color: #008BB0;
}

body {
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color)
}

/* added this */
.header-container {
  position:sticky;
  top:0;
}

header {
    /*width: 100%;*/
    /*top: 0; */
    /* right: 0; */
    /* z-index: 1000; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: transparent;*/
    background-color: lightskyblue; /* added this */
    padding: 28px 12%;
    transition: all .50s ease;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href='{% static "css/styles.css" %}'>
</head>

<body>
<div class='header-container'><!-- added this -->
    <header>
        <a href="#" class="logo"> <i class="ri-home-2-fill"></i><span>LOGO</span></a>
        <ul class="navbar">
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Soon</a></li>
        </ul>
        <div class="main">
            <a href="#" class="user"><i class="ri-nurse-fill"></i>Sign in</a>
            <a href="#">Register</a>
            <div class="bx bx-menu" id="menu-icon"></div>
        </div>
    </header>
    </div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p><p>line</p>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

css HTML内容位于导航栏顶部

1条答案

相关问题

热门标签

最新问答