在我最近的项目中，我有一个带有以下html代码的视图：
<body>
<header>
<ul>
<li><a th:href="@{/}" class="title">Loja</a></li>
</ul>
<ul class="right">
<li><a href="#" class="user">username</a></li>
<li><a href="#">logout</a></li>
</ul>
</header>
<main>
<aside>
<ul>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
<li><a href="#">blablabla</a></li>
</ul>
</aside>
<article>
</article>
</main>
</body>
以及侧边栏的CSS样式表（标签旁）：
aside li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
font-family: 'Special Elite', cursive;
}
/* Change the link color on hover */
aside li a:hover {
background-color: #555;
color: white;
}
aside li.active {
background-color: #4CAF50;
}
JSFIDDLE： https://jsfiddle.net/klebermo/ch6gtj3p/5/
当我在浏览器中打开此页面时，侧边栏的顶部隐藏在导航栏后面，有人知道如何解决这个问题吗？
我已经从您的标题中删除了position:absolute并添加了
header:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
这为您提供了与标题相同的效果。因为您有 2 个浮动项目，所以您应该在标题上使用透明来查看背景颜色而不是position: absolute
斯菲德尔
使用margin-top修复的问题是，如果高度发生变化，您将需要返回并调整它。
尝试在 css 中将 margin-top 添加到主标签。
main {
margin-top: 20px;
}
尝试添加边距顶部，这会将您的列表向下推
aside ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
margin-top:10%;
}
只需将其添加到您的 css 中：
aside {
margin-top: 3em;
}
在主标签中添加边距顶部，它工作正常。
main{
margin-top:50px;
}