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

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

1 个答案: