CSS:放置绝对定位元素，使其从外部接触其父元素

Question

我希望绝对定位的 child 像这样从外面触摸它的 parent :

.parent {
  background: #aaffaa;
  width: 200px;
  height: 200px;
  margin-left: 150px;
  display: flex;
  align-items: center;
  position: relative;
}

.child {
  background: #ffaaaa;
  width: 100px; // actually unknown, here for demo purposes
  height: 100px;
  position: absolute;
  left: 0;
  transform: translate(-100%);
}

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

问题:我不能使用 transform 属性，因为它已经在关键帧动画中使用，元素可能是也可能不是 position: absolute。对此有一些优雅的解决方案吗？

Answer 1

当然有!您的代码中只缺少 1 行。您只需要使用 right:100% 就可以了。

.parent {
  background: #aaffaa;
  width: 200px;
  height: 200px;
  margin-left: 150px;
  display: flex;
  align-items: center;
  position: relative;
}

.child {
  background: #ffaaaa;
  width: 100px;
  height: 100px;
  position: absolute;
  right: 100%;
}

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