CSS：“ transform：scale（）;”的位置错误集装箱儿童 [英] CSS: Wrong position of "transform: scale();" container children

问题描述

我有一个容器元素，该容器元素的内容长且可缩放：

I have a container element with long content which is scaled:

.container {
  transform: scale(0.9);
}

在此容器中，我有一个孩子 div 曾经是一个弹出窗口。绝对排名最高的 50％

inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50%

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

但不幸的是，当容器缩放时， 50％不起作用。如果出现在页面底部，我需要使用〜240％。

but unfortunately when container is scaled this 50% is not working. I need to use ~240% if it appears on the bottom of a page.

您现在要注意一些细节吗？

Do you now some specifics on applying positioning on children of scaled elements?

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

推荐答案

添加到 .wrap ：

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

您需要重新放置 .popup （现在参考框架是 .wrap ，而不是 html 元素），但是

You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.

请参阅：在Firefox中使用CSS Scale时，element保持原始位置

这篇关于CSS：“ transform：scale（）;”的位置错误集装箱儿童的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！