2017-12-02 150 views
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不在正確的位置。

我需要改變以解決這個問題?

回答

0

您的位置計算正常。

但是,您的覆蓋圖位於主體內部,因此它也受到您在其中設置的轉換的影響。

將它設置在另一個未轉換的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>