Question

因此，如果我们有父元素缩放和子元素position:fixed，则会出现问题：

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

它会破坏父元素position:fixed引起的子scale(2)。这个问题自2年前就已为人所知。这个问题有解决方法吗？

我真的必须在父母和位置使用比例：由于某种原因固定在孩子身上。

Answer 1

我不知道你想要在哪里定位子元素。但我知道，在您的情况下，定位子属性的底部和右侧属性不会按预期工作。但是，顶部和左侧的东西确实如此。

要将子元素放在右下角，我找到了以下解决方法：

<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>

由于某种原因，孩子的视口会因父母的比例而增加。因此，如果缩放系数为2，则必须将视口减小50％。

如果这对您没有帮助，请告诉我您想要放置子元素的位置。

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

1 个答案: