【问题标题】：React - Transform scale on hover messes with position absolute of sub componentReact - 悬停时变换比例与子组件的绝对位置混淆
【发布时间】：2020-10-16 18:53:17
【问题描述】：

我有一个问题，我想在悬停时缩放 frame。当我这样做时，sub 组件的绝对位置位于 frame 的父级右上角的绝对位置会从可缩放的组件中弹出。

我希望组件 sub 始终保持在原位，但我真的不知道该怎么做。

我尝试过使用transform-origin，但我不知道这是否可以解决我现在的问题。我相信当我转换 frame 时“幕后”会发生一些事情，但我无法弄清楚它是什么。

编辑：

感谢您的回答。但是，我认为我不太清楚自己想要实现的目标。我希望孩子留在frame 组件（右上角）上的位置，所以当frame 放大时，sub 仍然保持在15px 之外的那些（15px）。

与此同时，我发现了我的问题所在。因为我的App 是一个 div，frame 会随着App 的扩大而增加其大小。据我记得div 父母通常缩放到与他们的子组件相同的大小，这似乎是这里的问题。

当我在App 上加上边框时，我就清楚了。因此，考虑到这一点，将position: relative 放在frame 上并将sub 放在top 和right 上可能是一个更好的解决方案。

再次感谢您的回答。他们帮助我朝着正确的方向前进。

【问题讨论】：

标签： html css reactjs hover css-transforms

【解决方案1】：

对于position:relative，一旦框架发生变换，sub 就会尝试将其与您给定的top 和right 属性重新对齐...position:absolute 也会发生同样的情况，因为它也需要家长参考..

所以我们必须将sub 移出frame 并使用position:absolute 来获取您要查找的内容...

相关的CSS：

.sub {
  display: flex;
  align-items: center;
  position: absolute;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
  top: 20%;
  left: 20%;
  width: 50px;
  height: 50px;
  background-color: red;
  transform: scale(1);
}

forked & updated codesandbox

【讨论】：

【解决方案2】：

在此配置中，当 sub 是 frame 的子级时，只需确保在样式中提供 frame position: relative;

<div className="App">
  <div className="frame">
    <div className="sub">Hello, World!</div>
  </div>
</div>;

.frame {
  position: relative;     // add position relative
  background-color: blue;
  width: 100%;
  height: 100%;
  transition: transform 200ms;
}

【讨论】：

【解决方案3】：

您需要将您的相对位置从 .App 移动到 .frame 类

.App {
  font-family: sans-serif;
  width: 500px;
  height: 500px;
  padding: 15px;
}

.frame {
  position: relative; // move position relative here
  background-color: blue;
  width: 100%;
  height: 100%;
  transition: transform 200ms;
}

【讨论】：