影响位置计算的 CSS 比例变换答案

【问题标题】：CSS scale transform affecting position calculations影响位置计算的 CSS 比例变换
【发布时间】：2017-12-04 04:44:10
【问题描述】：

我有一个 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 复制了这个问题。您单击 Show Overlay，它会出现在按钮的正上方。刷新并首先按 Scale Body，这一次当您单击 Show Overlay 按钮时，红色 div 不在正确的位置。

我需要改变什么来解决这个问题？

【问题讨论】：

嗨，这是一篇旧帖子，呵呵，但我面临着类似的问题，有些元素在应用比例时将自己定位在远离应有的位置。你想出解决办法了吗？这对我会有帮助。谢谢！

标签： javascript jquery css

【解决方案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>

【讨论】：