22

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

.container {
  transform: scale(0.9);
}

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

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

4

1 回答 1

29

添加到.wrap

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

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

请参阅:在 Firefox 中使用 CSS Scale 时,元素保持原始位置

于 2013-09-22T16:25:55.883 回答