position: relative下设置right:0不生效，子div未靠右对齐问题

问题原因 #

position: relative 的偏移规则是相对于元素自身在正常文档流中的原始位置计算，而非相对于父元素边界：

• 块级子元素默认在父容器内左对齐，你设置的 right: 0 规则仅代表「相对于自身原始位置向右偏移0px」，不会产生右对齐父容器的效果。
• 额外提醒：你的HTML代码中子元素闭合标签写错了，应该是</div>而非<div>。

修复方案 #

方案1：子元素改用绝对定位（最符合预期写法）

父元素保持position: relative作为定位锚点，子元素用position: absolute，此时right/top值会相对于父元素边界计算：

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.child {
  position: absolute; /* 修改定位属性 */
  top: 80px;
  right: 0px;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

<div class="relative">This div element has position: relative;
  <div class="child">This div element has position: relative;</div> <!-- 修正闭合标签 -->
</div>

方案2：保留子元素相对定位，用margin实现右对齐

如果必须保留子元素的position: relative属性，给子元素加margin-left: auto即可实现块级元素右对齐，top偏移规则依然生效：

div.child {
  position: relative;
  top: 80px;
  margin-left: auto; /* 新增这行替换right:0 */
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

内容的提问来源于stack exchange，提问作者Vipul Tyagi