设置Position: relative; right: 0; 父元素为relative时定位未生效问题

核心原因：relative定位的偏移逻辑不是你想的那样 #

position: relative的偏移是相对于元素自身在文档流中的原始位置，而非父容器的边界。设置right: 0的意思是「元素的右侧距离它自己原本位置的右侧为0」，等于没有任何偏移，自然不会让元素跑到父容器的右边。

你的代码里还有这些小问题 #

• CSS选择器错误：你写的nav-bar是标签选择器，但HTML里导航栏用的是class="nav-bar"，应该改成.nav-bar才会生效。
• 错误地给li设置relative定位：你要对齐的是整个导航栏（nav或ul），不是单个列表项，给li加定位完全没用。
• HTML标签未闭合：两个<a>标签都没写闭合标签</a>，属于语法错误。

如果你非要用relative实现右对齐（不推荐） #

relative本身不适合做这种容器对齐，但硬要实现的话，需要先让元素占满父容器宽度，再通过偏移把它拉到右边：

.nav-bar ul {
  width: 100%;
  position: relative;
  right: calc(100% - fit-content);
}

这种写法很别扭，远不如flex或者margin-left: auto直观。

更合理的实现方式（用flex） #

这里给你修正后的完整代码，顺便解决之前的所有问题：

修正后的CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  width: 100vw;
  height: 100vh;
  background-color: rgb(49, 49, 49);
}

/* 修正为类选择器 */
.nav-bar {
  color: white;
}

#nav-border {
  background-color: aqua;
  border-radius: 10px;
  padding: 5px;
  /* 给父容器加flex，实现子元素右对齐 */
  display: flex;
  justify-content: flex-end;
}

li {
  display: inline-block;
  margin-left: 15px; /* 给列表项加间距 */
}

a {
  text-decoration: none;
}

a:link {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: skyblue;
}

修正后的HTML

<div id="main">
  <div id="nav-border">
    <nav class="nav-bar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</div>

总结 #

• position: relative的偏移逻辑是基于自身原始位置，不是父容器，所以right:0不会让元素右对齐。
• 容器对齐优先用flex布局，代码简洁且易维护。

内容的提问来源于stack exchange，提问作者Mr.E