position: absolute - left/right 如何与 transform: translateX/translateY 一起使用？答案

【问题标题】：How does position: absolute - left/right work with transform: translateX/translateY?position: absolute - left/right 如何与 transform: translateX/translateY 一起使用？
【发布时间】：2020-08-25 03:12:46
【问题描述】：

.dice#dice1 {
    position: absolute;
    top: 20%;
    left: 45%;
    transform: translateX(-55%);
}
    
.dice#dice2 {
    position: absolute;
    top: 20%;
    right: 45%;
    transform: translateX(55%);
    border: 1px solid blue;
}

以上代码结果如下：

虽然我正在使用这段代码，但我对绝对左右如何与翻译一起工作有点困惑......

谁能帮我理解这个？

【问题讨论】：

标签： html css sass css-transitions

【解决方案1】：

我怀疑的部分是 transformX 百分比是定位元素本身的宽度百分比，而顶部/左侧是父定位上下文元素的百分比.

.dice#dice1 {
  position: absolute;
  top: 20%;
  left: 45%;
  transform: translateX(-55%);
}

在以下情况下考虑这种情况：

包含元素的高度为 100 像素，宽度为 100 像素，并且
被定位的元素高 10 像素，宽 10 像素

元素的顶部为 20px，左侧为 45px，因为这分别是父元素的 20% 和 45%。

transformX 然后将元素向左移动 5.5px，即元素自身宽度 10px 的 55%。

【讨论】：

【解决方案2】：

使用百分比时，left/right/up/down 相对于容器定位元素，transform: translate() 相对于自身尺寸定位元素。

所以，left: 50% 是容器的一半，transform: translateX(50%) 是元素宽度的一半。

当元素为position: absolute 时，body 成为容器，除非您将position: relative 添加到父级。

【讨论】：

【解决方案3】：

从你的代码可以推断，首先你绝对定位两个div，这里是dice1和dice2，所以它是20% 从顶部和 45% 从右侧。

接下来将两个 div 定位在同一位置后，您将从当前位置平移 55%，一个沿正 x 方向，另一个沿负 x 方向。

【讨论】：