Html CSS转换适用于某些元素，但不适用于其他元素

首先，我想留下来，我是新的HTML和CSS，所以请原谅我，如果答案是显而易见的。我完全搞不清楚我的CSS代码现在在做什么。我设计了一个登录页面，其中标签文本向上移动了一点，当用户单击输入元素时会改变颜色。一切都按计划进行得很好。现在，为了保持一致性，我正在使用与登录页面相同的动画制作一个注册表单。然而，出于某种奇怪的原因，尽管我使用相同的代码（唯一的区别是位置类型[login使用绝对值，signup使用相对值]，以及更多的输入元素），但移动转换根本不起作用。文本仍会更改颜色，并且标签元素会立即向上移动，而不会出现过渡动画。任何关于为什么会发生这种情况的想法都将不胜感激

如果有帮助的话，我从youtube视频中得到了这个想法：

所有输入元素均遵循此布局：

.center卡{
保证金：3vh自动0自动；
宽度：30%；
最小宽度：30%；
高度：85vh；
背景：白色；
边界半径：10px；
}
.表格包装{
保证金：0自动；
宽度：90%；
最小宽度：90%；
}
.表格包装表格{
宽度：100%；
}
.表格包装标签{
字体大小：16px；
}
.注册输入{
边框底部：2个实心#adadad；
}
.注册输入，
.注册输入选择{
宽度：100%；
填充：0 5px；
字体大小：16px；
边界：无；
背景：无；
大纲：无；
位置：相对位置；
顶部：2.3vh；
}
.注册输入标签{
位置：相对位置；
底部：1vh；
左：0.5vh；
颜色：#adadad；
指针事件：无；
/*转化：translateY（-50%）*/
-webkit转换：0.5s；
-moz转变：0.5s；
-o-转变：0.5s；
过渡：0.5s；
}
.直线间距{
宽度：45%；
}
/*容器包装（决策者和员工人数）和（电子邮件和电话号码）*/
.决策者员工，
.电子邮件电话{
显示器：flex；
证明内容：之间的空间；
}
.密码边距{
边缘底部：3vh；
}
.注册输入span:：before{
内容：''；
宽度：0%；
高度：0.3vh；
背景：#2691d9；
位置：相对位置；
顶部：3.8vh；
显示器：flex；
过渡：0.5s；
-webkit转换：0.5s；
-moz转变：0.5s；
-o-转变：0.5s；
}
.注册输入：焦点~标签，
.注册输入：有效~标签，
.注册输入选择：焦点~标签，
.注册输入选择：有效~标签{
顶部：-4vh；
颜色：2691d9；
}
.注册输入：focus~span:：before，
.注册输入输入：有效~span:：before，
.注册输入选择：focus~span:：before，
.注册输入选择：valid~span:：before{
宽度：100%；
}

创建帐户
名称

由于您使用的是

position:relative

这种定位可能是最令人困惑和误用的。它真正的意思是“相对于自身”。如果设置位置：相对；在一个元素上，但没有其他定位属性（顶部、左侧、底部或右侧），它将对它的定位没有任何影响，它将完全像您将其保留为位置时一样：静态；但是如果你给它一些其他的定位属性，比如top:10px；，它将从正常位置向下移动10个像素。我相信你可以想象，根据元素的常规位置移动元素的能力是非常有用的。我发现自己多次使用它来排列表单元素，这些元素倾向于不想按我希望的方式排列

当你设置位置时，还有两件事会发生：相对的；在您应该注意的元素上。一个是，它引入了在该元素上使用z-index的能力，这不适用于静态定位的元素。即使没有设置z索引值，该元素现在也将显示在任何其他静态定位元素的顶部。您无法通过在静态定位的元素上设置更高的z索引值来解决此问题

发生的另一件事是它限制了绝对定位子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块中。这带来了一些我在这里谈论的强大机会

因此，可以尝试使用相同的
位置：绝对与登录时的代码>相同