当我这样做时"位置：固定"；，我在下面打开的新部分不会自动到达底线并从页面顶部开始。顶栏必须从正下方开始。此外，我写的文章看起来好像我没有直接给背景颜色。这种透明度的原因是什么？我该如何解决这两个问题？
提前感谢您的回答。
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
:root{
--background: rgba(85, 214, 170, .85);
}
html{
font-family: sans-serif;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
#top-bar{
position: fixed;
background-color: var(--background);
width: 100%;
height: 80px;
}
.container{
max-width: 1200px;
margin: 0 auto;
height: 100%;
}
.list{
display: flex;
justify-content: center;
}
.list ul{
position: absolute;
top: 100%;
}<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Nav-Bar</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="top-bar">
<div class="container">
<div class="list">
<h1 class="logo">Logo</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="anan">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
</body>
</html>给你的标题top: 0;以将其移动到顶部，给你的列表一些高度(或使用JavaScript等计算它(。也给你的".anan"margin-top:(你的标题和列表的高度以补偿。(注意，可能有一个更好的版本不需要设置列表高度，我现在想不出来：(
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
:root{
--background: rgba(85, 214, 170, .85);
}
html{
font-family: sans-serif;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
#top-bar{
top: 0;
position: fixed;
background-color: var(--background);
width: 100%;
height: 80px;
}
.container{
max-width: 1200px;
margin: 0 auto;
height: 100%;
}
.list{
display: flex;
justify-content: center;
height: 80px;
}
.list ul{
position: absolute;
top: 100%;
}
.anan {
margin-top: 160px;
}<!DOCTYPE html>
<html lang="tr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Nav-Bar</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="top-bar">
<div class="container">
<div class="list">
<h1 class="logo">Logo</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="anan">
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>
</body>
</html>