Question

将CSS scale转换应用于父容器后，我们无法使用绝对定位将新元素放在其子容器之上。

HTML：

<div class='grid'>
    <div class='row'>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
</div>

CSS：

div[data-role='page'] { -webkit-transform:scale(2); -webkit-transform-origin:top; height:50% }

JavaScript的：

var x = $( '.cell:first' ).offset().left;
var y = $( '.cell:first' ).offset().top;
var new_tile = $( '#templates .tile' ).clone();
new_tile.offset( {left: x, top: y} );
new_tile.addClass( 'show' );
$( '#play_page .all_tiles' ).append( new_tile );

重现（使用Chrome）：

访问http://panabee-games.herokuapp.com/stroll/stroll
在开发人员工具中，将以下CSS规则添加到#play_page元素：-webkit-transform:scale(2); -webkit-transform-origin:top; height:50%
上面的JS没有按预期将新元素放在第一个cell类之上。

我们如何调整元素的位置以考虑scale转换的应用？

Answer 1

基本上你想把那些绿球加在Gey上面......我是对的吗？

如果您想要这样做，那么您应该沿着其他灰球（旧元素）附加绿球（新元素），并且它们都包含在父div中，如下所示：

<div class='grid'>
    <div class='row'>

        <div class="cellwrap">
             <div class='cell'></div>

              <!-- Green ball appended dynamically -->
              <div class="tile show type_0" type="type_0" style="top: 540px; left: 586.28125px;">
             </div>
        </div>


        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>
</div>

在此之后，您可以正确更改z-index以突出显示要显示的任何元素。

结论：不是找出一种方法来改变动态添加元素的位置，以便它与其他一些缩放元素很好地匹配，你应该将动态添加元素的一部分作为要缩放的Div。在那种情况下，你不必担心定位。

将新元素放置在父级中包含的子级顶部，并应用CSS缩放变换

1 个答案: