反应 - 在悬停时变换比例会混乱子组件的绝对位置

Question

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

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

代码沙箱在这里

我试着弄乱了transform-origin，但我无法弄清楚这是否可以像现在这样解决我的问题。我相信当我变身时，"幕后"发生了一些事情frame，但我无法弄清楚它是什么。

编辑：

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

与此同时，我弄清楚了我的问题是什么。由于我的App是一个divframe因此随着App规模的扩大而增加它的大小。据我所知div父母通常会扩展到与子组件相同的大小，这似乎是这里的问题。

当我在App上划上边界时，我很清楚.因此，考虑到这一点，将position: relative放在frame上并仅将sub置于top和right上可能是更好的解决方案。

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

Answer 1

您需要将位置相对于 从 中移动。应用到 .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;
}

Answer 2

在此配置中，当sub是frame的子项时，只需确保在样式上给出frameposition: 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;
}

Answer 3

使用position:relative，一旦帧转换，sub就会尝试将其自身重新对齐，使其与您给定的top和right属性重新对齐......position:absolute也会发生同样的情况，因为它也需要父级作为参考。

所以我们必须把sub搬出frame，用position:absolute来得到你想要的东西......

相关JavaScript：

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

相关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);
}

分叉和更新的代码沙箱