时间戳

首页 > 解决方案 > 由于某种原因，粘性位置不起作用

html - 由于某种原因，粘性位置不起作用

问题描述

出于某种原因，当我尝试制作导航栏并将位置链接到标题元素而不是标签时，粘性位置不起作用。

我不知道为什么它也不起作用尝试了其他东西，其他位置，但问题仍然存在。

我想要一个功能，当用户向下滚动导航栏时，它会粘在网站的顶部，但是使用下面的代码，该功能不起作用。

这是代码

/*
reset.css by Oliver Petrovič
https://oliverpetrovic.sk
https://github.com/OliverPetrovic/css-reset
*/


*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: none;
}

html {
  /* So you will be able to use 1rem as 10px in whole document for any element*/
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
    background-image: url("../assets/back.jpg");
    background-size: cover;
    font-family: Kanit, sans-serif;
    min-height: 100vh;
}

/* This is for the header/navigation bar */

header{
    background-color: #5d666e;
    width: 100%;
    text-align: center;
    position: sticky;
}

header li {
    font-size: 4rem;
    display: inline-block;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

header a {
    color: white;
    margin: 1rem 2rem;
    text-decoration: none;
}

/* This is for the logo that will be in the navigation bar */

header .logo{
    background-color: red;
    text-indent: -999px;
}

div {
    position: absolute;
    font-size: 5rem;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html" target="_blank">Home</a></li>
                <li><a href="#" target="_blank">Forums</a></li>
                <li><a href="index.html" class="logo">Logo</a></li>
                <li><a href="staff.html" target="_blank">Staff</a></li>
                <li><a href="contact.html" target="_blank">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar at libero vitae vehicula. Proin fringilla ante ut vestibulum posuere. Donec fermentum eget dui maximus laoreet. Maecenas sit amet libero vel nulla vehicula ultrices. Sed eu erat tincidunt, scelerisque nunc sed, ornare arcu. Praesent massa mauris, sollicitudin sit amet odio sed, rhoncus pulvinar mi. Vivamus efficitur faucibus libero ut ullamcorper. Pellentesque purus neque, molestie vel nulla ut, commodo placerat elit. Ut placerat sagittis tempor. Nulla facilisi. Maecenas suscipit, sem eu porttitor dapibus, orci dolor condimentum velit, sit amet interdum urna leo id dui. 
        Vivamus non aliquet ex, vel consequat tortor. Duis aliquet ut eros at varius. Praesent pretium nunc vitae enim egestas porta. Sed mollis urna justo, eu rutrum velit posuere nec.
        Vestibulum tempus leo nec laoreet luctus. Nam auctor eros at tincidunt aliquet. Morbi scelerisque augue quis risus dignissim cursus. Integer ex libero, suscipit id facilisis vitae, maximus non augue. Ut eu posuere turpis. Aenean non nulla id purus sollicitudin vulputate id sed urna. Cras elementum nibh non velit mattis, vitae convallis diam ultricies. In id quam nunc.
        <br>
        Ut eget neque nulla. Nulla facilisi. Curabitur a fringilla turpis, sit amet iaculis orci. Nulla semper ante vel eros tincidunt, in ultrices massa luctus. Pellentesque in nulla dolor. Curabitur sollicitudin, eros iaculis molestie finibus, eros risus pharetra erat, quis ornare sem ipsum nec elit. Cras eu auctor lacus. Nunc sodales ornare fermentum. Pellentesque velit nisl, egestas et diam a, faucibus dignissim metus. Ut tincidunt porttitor urna at maximus. Aenean nec nisi faucibus, auctor tortor a, hendrerit libero. Cras vehicula tortor a augue tristique malesuada. Nunc sed ipsum vulputate, ullamcorper dui nec, condimentum metus.
        <br>
        Ut a quam quis libero interdum luctus. Vestibulum sit amet malesuada nisi. Vestibulum hendrerit a mauris at tincidunt. Fusce luctus facilisis leo et imperdiet. Mauris et justo elit. Nam egestas euismod lectus vel pharetra. Quisque ullamcorper nulla sit amet cursus eleifend. Nunc mollis eget ante sit amet laoreet. Vivamus hendrerit viverra risus, ac gravida neque interdum vitae. Aliquam porttitor mollis luctus. Morbi venenatis, ligula quis cursus bibendum, leo nisl sodales dolor, eget lacinia tortor nisl at tellus. Praesent porta justo sed efficitur tincidunt. Curabitur porta erat sed volutpat hendrerit.
        <br>
        Proin pellentesque viverra tortor, in finibus dolor volutpat eget. Donec bibendum at purus quis venenatis. Suspendisse a enim leo. Quisque commodo ligula a arcu rutrum, at tempor odio maximus. Maecenas ornare non enim et euismod. Quisque et velit feugiat, tempor augue non, iaculis purus. Donec feugiat pharetra facilisis.</div>
</body>
</html>

标签： htmlcss

解决方案

推荐阅读