Html 绝对位置与文档流混乱

我正在练习CSS，想做一个登录页。使用了一些我刚刚学到的绝对和相对概念，但一旦我设计了主要部分的样式，它似乎已经掩盖了我想在文档中添加的后续内容

代码如下：

.nav{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填料：2米；
位置：相对位置；
z指数：1；
}
.导航标志{
文本转换：大写；
颜色：#fff；
字号：2em；
填充：0.3em；
}
美国海军{
显示器：flex；
对齐项目：居中；
证明内容：中心；
列表样式类型：无；
}
李丽娜先生{
显示：内联块；
填充：10px 20px；
字号：600；
文字装饰：无；
颜色：#fff；/*4cabe9*/
过渡：所有0.3秒的缓进缓出；
}
.nav ul li a:悬停{
颜色：#449ad2；
}
.英雄{
高度：100vh；
宽度：100%；
背景：线性梯度（270度，rgba（0,72,124,0.9）0%，rgba（0,0,0,1）100%），
url（'/images/fitness.jpg'）中心不重复；
背景位置：中心；
背景尺寸：封面；
转换：scaleX（-1）；
排名：0；
位置：绝对位置；
}
.英雄文本{
位置：绝对位置；
颜色：#fff；
文本对齐：居中；
最高：50%；
左：50%；
文本对齐：居中；
宽度：100%；
转换：转换（-50%，-50%）scaleX（-1）；
}
.英雄文本{
文本转换：大写；
字体大小：1.7em；
填充：20px；
}
.英雄cta{
文本转换：大写；
光标：指针；
背景：线性梯度（135度，rgba（252171,16,1）0%，rgba（252171,16,1）100%）；
边界：无；
边缘顶部：1米；
边界半径：100px；
颜色：#fff；
填充：1em；
盒影：2px4px7px1pRGBA（252171,16,0.3）；
字体系列：“蒙特塞拉特”，无衬线；
过渡：所有0.3秒的缓进缓出；
}
.英雄cta：聚焦{
大纲：无；
}
.英雄cta:悬停{
字号：0.55em；
}
.生物{
身高：40%；
}

和尚+






让你今天过得最好
选择一个程序
传记
我的同僚们都是精英。是否有人认为这是一种罪过

也许使用section as作为flex容器，而不使用absolute将避免内容相互重叠

一个可能的开始：

.nav{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0.2em；
z指数：1；
}
.导航标志{
文本转换：大写；
颜色：#fff；
字号：2em；
填充：0.3em；
}
美国海军{
显示器：flex；
对齐项目：居中；
证明内容：中心；
列表样式类型：无；
}
李丽娜先生{
显示：内联块；
填充：10px 20px；
字号：600；
文字装饰：无；
颜色：#fff；
/*4cabe9*/
过渡：所有0.3秒的缓进缓出；
}
.nav ul li a:悬停{
颜色：#449ad2；
}
部分{
高度：100vh；
宽度：100%；
背景：线性梯度（270度，rgba（0,72,124,0.9）0%，rgba（0,0,0,1）100%），url（'/images/fitness.jpg'）中心不重复；
背景位置：中心；
背景尺寸：封面；
显示器：flex；
弯曲方向：立柱；
颜色：白色；
}
.英雄{
保证金：自动；
垫底：3em；
}
.英雄文本{
颜色：#fff；
文本对齐：居中；
}
.英雄文本{
文本转换：大写；
字体大小：1.7em；
填充：20px；
}
.英雄cta{
文本转换：大写；
光标：指针；
背景：线性梯度（135度，rgba（252171,16,1）0%，rgba（252171,16,1）100%）；
边界：无；
边缘顶部：1米；
边界半径：100px；
颜色：#fff；
填充：1em；
盒影：2px4px7px1pRGBA（252171,16,0.3）；
字体系列：“蒙特塞拉特”，无衬线；
过渡：所有0.3秒的缓进缓出；
}
.英雄cta：聚焦{
大纲：无；
}
.英雄cta:悬停{
字号：0.55em；
}
.生物{
身高：40%；
}

和尚+






让你今天过得最好
选择一个程序
传记
我的同僚们都是精英。是否有人认为这是一种罪过

也许使用section as作为flex容器，而不使用absolute将避免内容相互重叠

一个可能的开始：

.nav{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：0.2em；
z指数：1；
}
.导航标志{
文本转换：大写；
颜色：#fff；
字号：2em；
填充：0.3em；
}
美国海军{
显示器：flex；
对齐项目：居中；
证明内容：中心；
列表样式类型：无；
}
李丽娜先生{
显示：内联块；
填充：10px 20px；
字号：600；
文字装饰：无；
颜色：#fff；
/*4cabe9*/
过渡：所有0.3秒的缓进缓出；
}
.nav ul li a:悬停{
颜色：#449ad2；
}
部分{
高度：100vh；
宽度：100%；
背景：线性梯度（270度，rgba（0,72,124,0.9）0%，rgba（0,0,0,1）100%），url（'/images/fitness.jpg'）中心不重复；
背景位置：中心；
背景尺寸：封面；
显示器：flex；
弯曲方向：立柱；
颜色：白色；
}
.英雄{
保证金：自动；
垫底：3em；
}
.英雄文本{
颜色：#fff；
文本对齐：居中；
}
.英雄文本{
文本转换：大写；
字体大小：1.7em；
填充：20px；
}
.英雄cta{
文本转换：大写；
光标：指针；
背景：线性梯度（135度，rgba（252171,16,1）0%，rgba（252171,16,1）100%）；
边界：无；
边缘顶部：1米；
边界半径：100px；
颜色：#fff；
填充：1em；
盒影：2px4p7px1pRGBA（252171,16,0