CSS:quot的位置错误；变换：缩放（）&引用；容器儿童

我有一个长内容的容器元素，它是按比例缩放的：

.container {
  transform: scale(0.9);
}

在这个容器中，我有一个子

div

，它是一个弹出窗口。它位于绝对位置，顶部

50%

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

但不幸的是，当容器被缩放时，

50%

不起作用。如果它出现在页面底部，我需要使用

~240%

现在，您是否了解了在缩放图元的子级上应用定位的一些详细信息

---

演示：添加到

。包装
：

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

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

请参阅：
这是否回答了您的问题？