CSS缩放转换影响位置计算

Question

我有一个div，我显示并放置在另一个元素上。当我将CSS转换应用于整个身体时，该位置不再被正确计算。这里的JavaScript：

function Start() { 

    $('#ScaleBodyBtn').click(function() { 

    $('body').css({ 
     'transform': 'scale(1.5)', 
     'transform-origin': 'top left' 
    }); 
    }); 

    $('#ShowOverlayBtn').click(function() { 

    var ThePosition = $('#ShowOverlayBtn').offset(); 

    $('#Overlay').css({ 
     'top': ThePosition.top, 
     'left': ThePosition.left 
    }).show(); 

    }); 
} 

$(Start); 

这里的HTML/CSS

<input id="ScaleBodyBtn" type="button" value="scale body" /> 
<input id="ShowOverlayBtn" type="button" value="show overlay" /> 
<div id="Overlay"></div> 

#ShowOverlayBtn, 
#ScaleBodyBtn { 
    clear: both; 
    display: block; 
    margin: 50px 30px; 
} 

#Overlay { 
    display: none; 
    background: red; 
    height: 50px; 
    width: 50px; 
    position: absolute; 
} 

而这里的the jsFiddle进行复制的问题。您点击显示覆盖图，它就会出现在按钮的正上方。先刷新并按Scale Body，这次当你点击Show Overlay按钮时，红色的div不在正确的位置。

我需要改变以解决这个问题？

Answer 1

您的位置计算正常。

但是，您的覆盖图位于主体内部，因此它也受到您在其中设置的转换的影响。

将它设置在另一个未转换的div上，并且您没有问题。

function Start() { 
 

 
    $('#ScaleBodyBtn').click(function() { 
 

 
    $('#body').css({ 
 
     'transform': 'scale(1.5)', 
 
     'transform-origin': 'top left' 
 
    }); 
 
    }); 
 

 
    $('#ShowOverlayBtn').click(function() { 
 

 
    var ThePosition = $('#ShowOverlayBtn').offset(); 
 

 
    $('#Overlay').css({ 
 
     'top': ThePosition.top, 
 
     'left': ThePosition.left 
 
    }).show(); 
 

 
    }); 
 
} 
 

 
$(Start);

#ShowOverlayBtn, 
 
#ScaleBodyBtn { 
 
    clear: both; 
 
    display: block; 
 
    margin: 50px 30px; 
 
} 
 

 
#Overlay { 
 
    display: none; 
 
    background: red; 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
} 
 

 
#body2 { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="body"> 
 
<input id="ScaleBodyBtn" type="button" value="scale body" /> 
 
<input id="ShowOverlayBtn" type="button" value="show overlay" /> 
 
</div> 
 
<div id="body2"> 
 
<div id="Overlay"></div> 
 
</div>