这是我的第一篇文章，因为我还是编码新手。
我正在一个网站上进行练习，但遇到一个问题，我的导航栏悬在标题上。我试过调整边距，但没有用。我尝试过更改显示和位置，但最终会破坏布局。我的主要目标是将导航干净地嵌套在标题的右下角，但是我不确定如何修复它。这是我输入的代码：
将代码放入代码段中。
body {
margin: 0;
padding: 0;
text-align: center;
}
ul,
li {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
padding: 14px 16px;
background-color: green;
display: block;
color: white;
text-decoration: none;
}
li a:hover {
background-color: blue;
}
header {
background-color: green;
width: 100%;
height: 200px;
position: fixed;
z-index: 100;
top: 0;
border-bottom: 3px black solid;
}
.nav {
display: inline;
float: right;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 175px;
position: relative;
}<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<header>
<div class="nav">
<ul>
<li><a>Menu</a></li>
<li><a>Contact</a></li>
<li><a>News</a></li>
<li><a>About</a></li>
</ul>
</div>
</header>
Please run the code snippet to check if this is the desired change. I have changed the position from
relativetoabsoluteand addedbottom: 0andright: 0for class.nav.The simplest solution is to replace your
.navclass with:我认为这或多或少是您试图实现利润的目标。
An absolutely positioned element will be placed relative to the nearest positioned parent element (i.e. one with
relative,absolute,fixedorstickyposition). By default that is the highest level block, but since your header hasposition: fixedit is placed relative to that. Thebottomandrightvalues indicate the amount of offset from that block's respective edges.标头的高度为200像素，但您在页面顶部留了边距：导航为175像素。为了使导航在标题结束处开始，您至少需要200px作为顶部空白。