应用CSS缩放转换将新元素放置在父级中包含的子级之上

Question

After applying the CSS scale transform to a parent container, we cannot use absolute positioning to place new elements on top of its children.

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

Reproduce (use Chrome):

1. Visit http://panabee-games.herokuapp.com/stroll/stroll

2. Inside of Developer Tools, add the CSS rules below to the #play_page element: -webkit-transform:scale(2); -webkit-transform-origin:top; height:50% -webkit-transform:scale(2); -webkit-transform-origin:top; height:50%

3. The JS above does not position the new element above the first cell class as expected.

How do we need to adjust the position of the elements to account for the application of the scale transform?

Answer 1

Basically You want to add those Green Balls above the Gey one's...I am Right?

If this is want you want to do then you should the append the Green balls( new elements ) along the with other Grey balls ( old elements ) and both of them contained inside a parent div like this:

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

And after this you can properly change the z-index to highlight whichever element you want to show.

Conclusion: instead of figuring out a way to change the positioning of dynamically added elements so that it fits well along with some other scaled element you should make that dynamically added element part of the Div which is going to be scaled. I that case you wont have to worry about positioning.