CSS缩放转换影响位置计算

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个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不在正确的位置。

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

回答：

您的位置计算正常。

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

将它设置在另一个未转换的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>

以上是 CSS缩放转换影响位置计算 的全部内容， 来源链接： utcz.com/qa/258428.html

回到顶部