如何将div绝对定位至主容器div的右侧外部？

当然可以搞定这个问题！不用硬编码right数值的话，我们有个非常简洁的CSS技巧，能让动态内容的元素完美贴在父元素的右侧外侧，完全适配内容宽度。

核心方法：transform: translateX(100%) #

我们只需要调整.b和.c的CSS属性，把固定的right值换成right: 0，再加上transform: translateX(100%)就可以了：

.a { 
  width: 400px; 
  height: 150px; 
  border: 1px solid #777; 
  position: relative; 
} 
.b { 
  position: absolute; 
  top: 30%; 
  right: 0; /* 先让元素贴紧父元素的右边缘 */
  transform: translateX(100%); /* 向右移动自身宽度的100%，刚好到父元素外侧 */
} 
.c { 
  position: absolute; 
  top: 50%; 
  right: 0; 
  transform: translateX(100%); 
}

为什么这个方法有效？ #

• right: 0 让元素的右边缘和父元素的右边缘对齐；
• transform: translateX(100%) 会把元素沿着X轴向右移动自身宽度的100%，不管内容是短的"hello"还是长的"testing longer"，都能刚好停在父元素的右侧外面，完全不需要提前计算宽度。

扩展：添加间距 #

如果想让元素和父元素之间留一点空隙，直接用calc()结合transform就可以，比如要8px的间距：

transform: translateX(calc(100% + 8px));

这个方法的好处是完全不依赖硬编码数值，不管内容怎么变都能自适应，而且transform不会影响页面其他元素的布局，非常实用！

内容的提问来源于stack exchange，提问作者Ryan Peschel