html - 变换 : scale3d(1, 0.1, 1); ".1"太宽

Question

scale3d() here正确显示:

label::after {
  z-index: -1;
  background: green;  /* ::after background */
  transform: scale3d(1, .1, 1); /*"Y" should be zero but I put ".1" for now so I can see its initial position" */
  transform-origin: 50% 0%;
}  

但是here不是，为什么“.1”太宽了？

另一个问题是，如果我设置为 transform: scale3d(1, 0, 1);并专注于输入字段，然后什么也没有发生，我希望看到聚焦后出现绿色背景。

Answer 1

亲子关系来了。您直接在 absolute 位置定义了 child ，而没有定义 parent 。 parent 应该总是有亲戚在位。所以让 child 的 parent 定位，这样你的绿色背景就会正常工作

.username {position: relative;}

Parent没有定位，所以absolute属性依赖于document