Question

我有一个div，我展示并定位在另一个元素上。当我将CSS变换应用于整个身体时，位置不再正确计算。这是javascript：

<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;
}

这是HTML / CSS

{{1}}

这里的the jsFiddle复制了这个问题。单击“显示叠加”，它将显示在按钮上方。刷新并按下Scale Body，这次当您单击Show Overlay按钮时，红色div不在正确的位置。

我需要更改以解决此问题？

Answer 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>

CSS比例变换影响位置计算

1 个答案: