CSS Translate 在原始位置创建空白

Question

我正在尝试翻译文本，但它会在原始位置创建空间并影响以下 div 标签，当执行 upperhide 样式时，标签保持左对齐，但当由于转换而使用上部样式时，它会在其位置创建空白并且标签右对齐。 我尝试在 div 上包装大写文本并对其进行翻译，但力图解决了空白问题。非常感谢任何建议。 样式和Html如下，

  Upper:{
    transform: "translate(-4px, -20px) scale(.5)",
    backgroundColor:"#FFFFFF",
    transformOrigin:"top center",
    outline: "1px solid transparent",
    overflow:"hidden"

  },
  Upperhide:{
   display:'none'
  },

       <div id="Uppertext" className={(value) ? classes.Upper : classes.Upperhide}>{label}</div>
       <div id="Label" className={classes.Label}>{label}</div>

https://codesandbox.io/s/throbbing-field-4by3l 在示例代码中，按钮包含 hello 作为上部文本。翻译的时候依然占据原来的div位置，label只出现在上面文字占据的原来的div位置之后

Answer 1

这是因为transform: translate() 不会改变文档流。元素的原始空间不受影响，并且在其原始位置仍然可见。 （已经在another answer 讨论过）。

要完成您想要的，您需要使用绝对定位将元素从文档流中取出。所以替换这个：

transform: translate(-4px, -11px);

用这个：

position: absolute;
left: -4px;
top: -11px;

（还要注意父元素 - 在本例中为 <button> - 也必须使用 position: relative 或 position: absolute 定位）

您可以在此处查看并排比较：

button {
  position: relative;
  display: flex;
  margin: 20px 0;
}
span {
  outline: 1px solid green;
}
.transform {
  transform: translate(-4px, -11px);
}
.absolute {
  position: absolute;
  left: -4px;
  top: -11px;
}

<button>
  <span class="transform">This</span> is transformed
</button>

<button>
  <span class="absolute">This</span> is positioned
</button>