javascript - 当父元素具有 2D 变换时，子元素显示在错误的位置

Question

具有 CSS 属性“transform”的元素不喜欢具有“position: absolute”属性的嵌入元素，这让我抓狂!!!

单击菜单项时，会出现一个内容 div。当父级上没有 2D 变换时，它位于正确的位置，但当悬停在其父级上时显示在最右侧。

有办法解决这个问题吗？

注意:我无法将嵌入元素 (.floater) 移到框外，因为它包含在 ng-repeat(来自 AngularJs 的转发器)中

(点击并悬停进出看看我的意思)

这是我的 JsFiddle .

CSS(3):

.box {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    margin:100px auto;
}
.box:hover {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}
.box p {
    padding: 10px;
    background: gray;
}
.floater {
    position: absolute;
    display:none;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    background: #eee;
    top:126px;
    left:520px;
}

Answer 1

当一个元素进行 2D 变换时，它的子元素似乎将其视为 position: relative; 或 position: static。

您需要做的就是使 .box position: relative; 以便行为保持一致，然后定位 .floater相对于盒子。

所以把.box改成

.box {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    margin:100px auto;
    position: relative; // this is the added line
}

然后像这样改变.floater的左边和顶部

.floater {
    position: absolute;
    display:none;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    background: #eee;
    top: 0; // changed this
    left: 250px; // changed this.
}