CSS：放置绝对定位元素，使其从外部接触其父级答案

【问题标题】：CSS: placing absolute positioned element so that it touches its parent from outsideCSS：放置绝对定位元素，使其从外部接触其父级
【发布时间】：2019-12-22 21:51:26
【问题描述】：

我希望绝对定位的孩子像这样从外面触摸它的父母：

.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。有什么优雅的解决方案吗？

【问题讨论】：

确实可以使用转换。您只需将其他转换包含在一个声明中，例如 transform: translateX(-100%) rotate(90deg); 但是，如果您知道孩子是 100px 宽，为什么不 left: -100px？
@cale_b，首先，例如，我将其设置为 100px 宽，实际上它没有固定宽度。其次，另一个变换声明在动画中，所以我不得不加倍动画声明
让这成为一个细节很重要的课程。查看我的favorite move scenes之一

标签： css positioning absolute

【解决方案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>

【讨论】：

哦，那是一个如此明显的解决方案，我不知道我自己怎么没有想出它。太好了，非常感谢您
要明确 - 不是缺少一行 - 而是要更改一行。不能保留 right 和 left 声明，否则会产生不良结果:)