Question

我有一个容量元素，内容很长，可以缩放：

.container {
  transform: scale(0.9);
}

在这个容器中我有一个孩子div，它曾经是一个弹出窗口。它位于绝对顶部50%

.popup {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
}

但不幸的是，当容器缩放时，50%无效。如果它出现在页面底部，我需要使用~240%。

你现在有一些关于在比例元素的孩子身上应用定位的细节吗？

DEMO： http://labs.voronianski.com/test/scaled-positioning.html

Answer 1

添加到.wrap：

.wrap {
  ...
  position: relative;
  /*some prefix*/-transform-origin: 0 0;
}

您需要重新定位.popup（现在参考框架是.wrap，而不是html元素），但在Chrome中，缩放切换在此更改后正常工作