由于某些原因，当我尝试制作导航栏并将位置链接到标题元素而不是标签时，粘性位置不起作用。
我不知道为什么它也不能正常工作，尝试了其他方法，但仍然存在问题。
我希望当用户向下滚动导航栏时该功能粘贴到网站顶部，但是使用以下代码，该功能不起作用。
这是代码
/*
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>