当父元素具有 2D 变换时，子元素显示在不正确的位置答案

【问题标题】：Child element displayed in incorrect location when parent element has a 2D transform当父元素具有 2D 变换时，子元素显示在不正确的位置
【发布时间】：2015-01-23 12:14:03
【问题描述】：

具有 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;
}

【问题讨论】：

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

标签： javascript angularjs css

【解决方案1】：

当一个元素具有二维变换时，其子元素似乎将其视为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.
}

【讨论】：