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

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):

1. 访问 http://panabee-games.herokuapp.com/stroll/stroll

2. 在开发人员工具中，将下面的 CSS 规则添加到 #play_page 元素:-webkit-transform:scale(2); -webkit-transform-origin:top;高度:50%

3. 上面的 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 的一部分。在这种情况下，您不必担心定位问题。