CSS HTML：父级扩展和子级位置是否有解决方法：已修复？

Question

So the problem occurs if we have parent element which is scaled and children elements with position:fixed : 因此，如果我们有父元素缩放和子元素的position:fixed就会出现问题：

.parent {
    transform: scale(2);
    transform-origin: 0 0 0;
}
.child {
    position:fixed;
}

It breaks the child position:fixed caused by scale(2) on the parent element. 它打破了子position:fixed由父元素上的scale(2)引起的position:fixed 。 The problem has been known since 2 years ago. 这个问题自2年前就已为人所知。 Is there a workaround for this problem? 这个问题有解决方法吗？

I really have to use scale on the parent and position:fixed on the children for some reason. 我真的必须在父母和位置使用比例：由于某种原因固定在孩子身上。

Answer 1

I don't know where you want to position the child element. 我不知道你想在哪里定位子元素。 But I know that in your case the bottom and right attributes to position the child attribute don't work as expected. 但我知道在你的情况下，定位子属性的bottom和right属性不能按预期工作。 The top and left propterties do though. 尽管如此，顶部和左侧的东西都可以。

To position the child element in the lower right corner I found the following workaround: 要将子元素放在右下角，我找到了以下解决方法：

<html>
  <head>
    <style>
    .parent {
      transform: scale(2);
      transform-origin: 0 0 0;
      background-color: blue;
    }
    .child {
      position: fixed;
      left: calc(50vw - 100px);
      top: calc(50vh - 100px);
      background-color: red;
    }
    </style>
  </head>
  <body>
    <div class="parent">
      parent
      <div class="child">child</div>
    </div>
  </body>
</html>

For some reason the viewport of the child gets increased by the scale of the parent. 由于某种原因，孩子的视口会因父母的规模而增加。 Because of that you have to decrease the viewport by 50% in case of a scaling by the factor of 2. 因此，如果缩放系数为2，则必须将视口减小50％。

If this does not help you please let me know where you want to position the child element. 如果这对您没有帮助，请告诉我您想要定位子元素的位置。

CSS HTML：父级扩展和子级位置是否有解决方法：已修复？

问题描述

1 个解决方案

解决方案1
0 2017-09-22 08:57:39

CSS HTML：父级扩展和子级位置是否有解决方法：已修复？

问题描述

1 个解决方案

解决方案1 0 2017-09-22 08:57:39

解决方案1
0 2017-09-22 08:57:39