CSS-Skalierung, die die Positionsberechnungen beeinflusst

Question

Ich habe ein div, das ich über einem anderen Element zeige und positioniere. Wenn ich eine CSS-Transformation auf den gesamten Körper anwende, wird die Position nicht mehr korrekt berechnet. Hier ist die 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); 

Hier ist der 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; 
} 

Und hier ist the jsFiddle, die das Problem repliziert. Sie klicken auf Overlay anzeigen und es erscheint direkt über der Schaltfläche. Aktualisieren Sie und drücken Sie Scale Body zuerst und dieses Mal, wenn Sie auf die Schaltfläche Show Overlay klicken, ist das rote Div nicht an der richtigen Stelle.

Was muss ich ändern, um das Problem zu beheben?

Answer 1

Ihre Position ist in Ordnung.

Ihr Overlay befindet sich jedoch innerhalb des Körpers und wird daher auch von der Transformation beeinflusst, die Sie darin festlegen.

Setzen Sie es auf eine andere, nicht transformierte div, und Sie sind in Ordnung.

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>