将新元素放置在父元素中包含的子元素之上，并应用 CSS 缩放变换答案

【问题标题】：Position new elements on top of children contained in parent with CSS scale transform applied将新元素放置在父元素中包含的子元素之上，并应用 CSS 缩放变换
【发布时间】：2014-05-30 06:40:26
【问题描述】：

将 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 变换的应用？

【问题讨论】：

标签： javascript html css

【解决方案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 的一部分。那样的话你就不用担心定位了。

【讨论】：