Javascript 当父元素具有二维变换时，子元素显示在不正确的位置

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

单击菜单项时，将显示内容div。当父对象上没有二维变换时，该变换位于正确的位置，但当鼠标悬停在其父对象上时，将显示在最右侧

有办法解决这个问题吗

注意：我无法将嵌入式元素。浮动框移到框外，因为它包含在AngularJs的ng repeat repeater中继器中

单击并将鼠标悬停在内外以了解我的意思

这是我的名片

css3：

---

当元素具有2D变换时，其子元素似乎将其视为位置：相对；或位置：静态

您所需要做的就是使.box位置：相对；因此，行为保持一致，然后相对于盒子定位.flower

所以把盒子换成

然后改变，漂浮物在左边和上面，就像这样

.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.
}

---

我不清楚实际的问题是什么。“不喜欢”不是很有描述性。

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

.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.
}