我一直在做一些事情，我想移動(并在稍后制作動畫)一個元素的位置，基于它自己的寬度，我想用純CSS來處理它。我已經嘗試了多種方法，但無法找到解決方案。

我最初嘗試使用左:50%，但這里的百分比是根據父。

然后我不得不依賴JavaScript。我能夠用JavaScript(在代碼下面)解決這個問題。但是我想在沒有JS的情況下這樣做

const child = document.getElementById("child");
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: 50%;
}

<div id="parent">
  <div id="child"></div>
</div>
<br>

經過大量的研究，我發現我可以使用CSS transform: translateX(100%)根據元素自身的寬度來移動元素的位置。

.parent1 {
  width: 500px;
  height: 50px;
  border: 1px solid;
  position: relative;
}

.child1 {
  width: 200px;
  height: 100%;
  background-color: blueviolet;
  position: absolute;
  left: 50%;
}

.parent2 {
  width: 500px;
  height: 50px;
  border: 1px solid;
  position: relative;
}

.child2 {
  width: 200px;
  height: 100%;
  background-color: blueviolet;
  position: absolute;
  transform: translateX(100%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<br>
<div class="parent2">
  <div class="child2"></div>
</div>

記住，如果你用百分號。與左上-下-右，其根據父寬度。但用翻譯，其根據目前的因素。

當你讓元素向左移動50%時，你的左邊緣停留在50%而不是你的中心元素。所以我們只需要用translateX把中心推到這個位置(-50%)。這也是使元素居中的流行方法(左上:50%，平移(-50%，-50%)

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

#child {
  width: 200px;
  height: 100%;
  background-color: blueviolet;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<div id="parent">
  <div id="child"></div>
</div>
<br>