Html 其他元素堆叠在一起，我已经将它们的容器设置为位置：相对；

我正在尝试为3个输入表单设置一个很好的底部边距

但我不知道为什么其他元素会堆积在一起

我已经将所有3个

都设置为相对，并且我希望其中的内容设置为

位置：绝对

以绝对显示在各自的容器中

，

.group

显示良好：

.group {
    position: relative;
    top: 60px;
    left: 0%;
    margin-bottom: 30px;
    color: white;
}

在下面，不工作：

正文{
背景色：皇家蓝；/*#F0*/
边际：0px；
}
形式{
位置：相对位置；
顶部：50px；
左：37%；
宽度：280px；
高度：300px；
边框：1px实心#B0C4DE；
背景：皇家蓝；
边界半径：0px；
}
.组{
位置：相对位置；
顶部：60px；
左：12%；
边缘底部：30px；
}
/*主要效果======================================================================*/
输入{
位置：绝对位置；
顶部：0px；
左：0px；
字体系列：monospace；/*'Montserrat'，无衬线*/
边界：0；
边框底部：1.5px纯色米色；
背景：透明；
字体大小：15px；/*边框是/否*/
高度：25px；
宽度：200px；
大纲：0；
z指数：1；
颜色：黑色；
}
跨度{
位置：绝对位置；
顶部：0px；
左：0px；
字体系列：monospace；/*'Montserrat'，无衬线；*/
字号：17px；
z指数：1；
颜色：白色；
过渡：顶部。5s宽，字体大小。5s宽；
}
标签：：之后{
内容：''；
位置：绝对位置；
顶部：6px；/*：：位置后*/
左：0px；
宽度：200px；
高度：23px；
边界半径：2px；
背景：米色；a86bf*/
转变：转变7s；
变换：scale3d（1,0.08,1）；
变换原点：底部；
}
输入：焦点+标签：：之后，
输入：有效+标签：：后{
顶部：6px；
变换：scale3d（1,1.3,1）；
过渡时间函数：线性；
/*：：后位*/
}
输入：焦点+标签>范围，
输入：有效+标签>范围{
顶部：-20px；
字体大小：11px；
/*垫底：15px*/
}

用户名
密码
确认密码

你试过这样做吗

正文{
背景色：皇家蓝；/*#F0*/
边际：0px；
}
形式{
位置：相对位置；
顶部：50px；
左：37%；
宽度：280px；
高度：300px；
边框：1px实心#B0C4DE；
背景：皇家蓝；
边界半径：0px；
}
.组{
位置：相对位置；
左：12%；
}
.grp1{
顶部：60px；
}
.grp2{
顶部：110px；
}
.grp3{
顶部：160px；
}
.grp4{
顶部：210px；
}
/*主要效果======================================================================*/
输入{
位置：绝对位置；
顶部：0px；
左：0px；
字体系列：monospace；/*'Montserrat'，无衬线*/
边界：0；
边框底部：1.5px纯色米色；
背景：透明；
字体大小：15px；/*边框是/否*/
高度：25px；
宽度：200px；
大纲：0；
z指数：1；
颜色：黑色；
}
跨度{
位置：绝对位置；
顶部：0px；
左：0px；
字体系列：monospace；/*'Montserrat'，无衬线；*/
字号：17px；
z指数：1；
颜色：白色；
过渡：到.5s易用，字体大小.5s易用；
-webkit过渡：top.5s ease，字体大小.5s ease；
-moz过渡：top.5s ease，字体大小.5s ease；
-ms过渡：顶部。5s轻松，字体大小。5s轻松；
}
标签：：之后{
内容：''；
位置：绝对位置；
顶部：6px；/*：：位置后*/
左：0px；
宽度：200px；
高度：23px；
边界半径：2px；
背景：米色；a86bf*/
转变：转变7s；
-webkit转换：transform.7s；
-moz跃迁：变换.7s；
-ms转变：转变7s；
变换：scale3d（1,0.08,1）；
-webkit转换：scale3d（1,0.08,1）；
-ms变换：scale3d（1,0.08,1）；
-moz变换：scale3d（1,0.08,1）；
变换原点：底部；
-webkit转换原点：底部；
-moz变换原点：底部；
-ms变换原点：底部；
}
输入：焦点+标签：：之后，
输入：有效+标签：：后{
顶部：6px；
变换：scale3d（1,1.3,1）；
-webkit转换：scale3d（1,1.3,1）；
-moz变换：scale3d（1,1.3,1）；
-ms变换：scale3d（1,1.3,1）；
过渡时间函数：线性；
-webkit转换定时功能：线性；
-moz过渡时间函数：线性；
-ms转换定时功能：线性；
/*：：后位*/
}
输入：焦点+标签>范围，
输入：有效+标签>范围{
顶部：-20px；
字体大小：11px；
/*垫底：15px*/
}

试验
电子邮件
用户名
密码
确认密码

谢谢。我现在要用这个，但没有办法解释为什么它们会堆积；具有位置的元素：绝对；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。然而；如果绝对定位元素没有定位祖先，它将使用文档正文，并随着页面滚动而移动。我不确定这在我的问题中是否适用（编写正确的代码）。您的.grop是相对位置，则必须设置“组”位置相对位置vs绝对位置