CSS：“变换：缩放（）；”的错误位置 集装箱儿童
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18943773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Wrong position of "transform: scale();" container children
提问by Kosmetika
I have a container element with long content which is scaled:
我有一个内容很长的容器元素，可以缩放：
.container {
transform: scale(0.9);
}
inside this container I have a child divwhich is used to be a popup. It's positioned absolute with top 50%
在这个容器内，我有一个孩子div，它曾经是一个弹出窗口。它与顶部绝对定位50%
.popup {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
}
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.
但不幸的是，当容器被缩放时，这50%不起作用。~240%如果它出现在页面底部，我需要使用。
Do you now some specifics on applying positioning on children of scaled elements?
你现在有一些关于在缩放元素的子元素上应用定位的细节吗？
DEMO:http://labs.voronianski.com/test/scaled-positioning.html
演示：http : //labs.voronianski.com/test/scaled-positioning.html
回答by rvidal
Add to .wrap:
添加到.wrap：
.wrap {
...
position: relative;
/*some prefix*/-transform-origin: 0 0;
}
You'll need to reposition the .popup(now the reference frame is the .wrap, instead of the htmlelement), but in Chrome the scale toggle works fine after this change.
您需要重新定位.popup（现在参考框架是.wrap, 而不是html元素），但在 Chrome 中，此更改后缩放切换工作正常。
See: When using CSS Scale in Firefox, element keeps original position
