0
我有一個div,我顯示並放置在另一個元素上。當我將CSS轉換應用於整個身體時,該位置不再被正確計算。這裏的JavaScript:CSS縮放轉換影響位置計算
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不在正確的位置。
我需要改變以解決這個問題?