Javascript 使用CSS缩放/矩阵不会'；不要让背景与元素对齐

我有一个背景带点的div。有一些子元素。如果我应用以下CSS：

transform:scale(x);

然后元素不再与背景对齐，即使该比例设置为1（我也尝试过这种变换：矩阵（…）

我做了一把小提琴来证明我的意思：

.container{
宽度：500px；
高度：500px；
背景：蓝色；
}
.转变{
宽度：100%；
身高：100%；
背景图像：径向梯度（黑色3px，白色3px）；
背景尺寸：100px 100px；
/*注释以查看它应该是什么样子*/
变换：比例（1）；
}
.孩子{
高度：100px；
宽度：100px；
背景：红色；
位置：绝对位置；
顶部：258px；
左：258px；
}

---

我有一个解决方案，但我不知道到底是什么导致了根本问题

您的红方块子对象具有

位置：绝对

，但它没有具有

位置：相对

的父对象，因此它的位置绝对相对于文档本身。当您应用转换时，无论出于何种原因，它都会相对于.toTransform进行绝对定位，在您的示例中，由于自然边距和填充，它与文档的偏移量约为10 px。从本质上讲，通过添加转换，它看起来就像您已将

位置：relative

隐式应用于

.toTransform

因此，如果您最初这样做，添加/删除变换不应产生干扰，即

.toTransform {
  position:relative;
}
.child {
  /* drop each value by ~10px */
  top: 248px;
  left: 248px;
}

现在，无论是否进行了变换，正方形的位置都不会受到影响

---

可能相关：

我有一个解决方案，但我不知道到底是什么导致了根本问题

您的红方块子对象具有

位置：绝对

，但它没有具有

位置：相对

的父对象，因此它的位置绝对相对于文档本身。当您应用转换时，无论出于何种原因，它都会相对于.toTransform进行绝对定位，在您的示例中，由于自然边距和填充，它与文档的偏移量约为10 px。从本质上讲，通过添加转换，它看起来就像您已将

位置：relative

隐式应用于

.toTransform

因此，如果您最初这样做，添加/删除变换不应产生干扰，即

.toTransform {
  position:relative;
}
.child {
  /* drop each value by ~10px */
  top: 248px;
  left: 248px;
}

现在，无论是否进行了变换，正方形的位置都不会受到影响

可能相关：