如何仅用CSS基于元素自身宽度移动元素位置？

方法1：用CSS Transform（最推荐） #

CSS里的transform: translateX()，它的百分比值是按元素自身宽度计算的，刚好能实现你要的效果。要达到和JS代码child.style.left = child.offsetWidth + "px"一样的结果（元素向右移动自身宽度的距离），代码可以这么写：

#parent {
  width: 500px;
  height: 100px;
  border: 1px solid;
  position: relative;
}

#child {
  width: 200px;
  height: 100%;
  background-color: blueviolet;
  position: absolute;
  left: 0; /* 初始贴在父元素左侧 */
  transform: translateX(100%); /* 向右移动自身宽度的100% */
}

后续加动画也很简单，直接给transform加过渡效果即可，性能表现也更优：

#child {
  /* 保留原有样式 */
  transition: transform 0.3s ease;
}

#child:hover {
  transform: translateX(150%); /* 鼠标悬停时移动1.5倍自身宽度 */
}

方法2：用Grid/Flexbox（适合布局场景） #

如果你的布局允许，也可以通过Grid或Flexbox实现类似位移，比如用Flexbox配合占位元素，但这种方式需要额外添加一个元素，且占位元素宽度要和子元素同步，灵活性不如Transform：

<div id="parent">
  <div class="spacer"></div>
  <div id="child"></div>
</div>

#parent {
  width: 500px;
  height: 100px;
  border: 1px solid;
  display: flex;
}

.spacer {
  width: 200px; /* 和child宽度保持一致 */
}

#child {
  width: 200px;
  height: 100%;
  background-color: blueviolet;
}

注意：别用left: 100% #

left: 100%是按父元素宽度计算的，会让子元素的左边缘对齐父元素的右边缘，和你需要的基于自身宽度移动的效果完全不同，所以不要用这种写法。

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