CSS Translate 在原始位置创建空白

Question

我正在尝试翻译文本，但它会在原始位置上创建空间并影响以下 div 标签，当执行 upperhide 样式时，标签保持左对齐，但当由于转换而使用 upper 样式时，它会在其位置上创建空白，并且标签为右对齐。我尝试将上面的文本包装在 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 位置，标签仅出现在上面文本占据的原始 div 位置之后

Answer 1

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

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

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

有了这个：

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

（另请注意父元素 - 在本例中<button>- 也必须使用 或 进行position: relative定位position: absolute）

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

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

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