Html 带位置的定位元件：彼此并排固定

对于用于移动浏览器的web应用程序，我想集成简单而优雅的预加载程序。它将位于半透明覆盖层的顶部。它上面还会有一些单词（例如“请稍候…”或“稍等片刻…”等）

我试着整合所有这些。结果如下（运行代码段）。它有3个不同的问题（你能帮我全部解决吗）：

1） 我无法将预加载程序+它的文本定位在半透明覆盖层的顶部（尽管我使用了高

z-index

）

2） 此外，预加载图形会随着顶部句子的长度而倾斜。我希望它独立于此

3） 最后，它们并没有精确地定位在中间（垂直地说）

body{背景：#ECF0F1}
.家长{
位置：固定；
z指数：1；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.标题{
边缘底部：1米；
颜色：灰色；
位置：相对位置；
z指数：10；
}
.装载{
宽度：50px；
高度：50px；
位置：相对位置；
z指数：10；
}
.load hr{边框：0；边距：0；宽度：40%；高度：40%；位置：固定；边框半径：50%；动画：旋转}
.load:第一个子项{背景：#19A68C；动画延迟：-1.5s}
.load:n子（2）{背景：#F63D3A；动画延迟：-1s}
.load:n子（3）{背景：#FDA543；动画延迟：-0.5s}
.load:最后一个子项{背景：#193B48}
@关键帧旋转{
0%，100%{transform:translate（0）}
25%{转换：翻译（160%）}
50%{转换：翻译（160%，160%）}
75%{transform:translate（0,160%）}
}
.覆盖{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
不透明度：0.6；
z指数：100；
背景色：#FFFFFF；
}
身体{
背景：#E8F5E9；
背景：重复线性渐变(
对,，
#FAFAFA，
#fafa50px，
#E8F5E9 50px，
#E8F5E9 100px
);
}

我爱你，我爱你。。。

问题在于

hr

元素的位置是固定的，它们应该是绝对的，以保持与父容器的关系。然后简单地将

margin:auto

添加到

load

以使其居中

由于

parent

和

overlay

元素都是固定位置，您可以将它们分开，以便能够正确使用z索引并避免应用overlay的不透明度：

正文{
背景：#ECF0F1
}
.家长{
位置：固定；
z指数：1000；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.标题{
边缘底部：1米；
颜色：灰色；
位置：相对位置；
z指数：10；
}
.装载{
宽度：50px；
高度：50px；
位置：相对位置；
z指数：10；
保证金：自动；
}
.装载人力资源{
边界：0；
保证金：0；
宽度：40%；
身高：40%；
位置：绝对位置；
边界半径：50%；
动画：旋转2秒轻松无限
}
.第一个孩子{
背景：#19A68C；
动画延迟：-1.5s
}
.负载：第n个孩子（2）{
背景#F63D3A；
动画延迟：-1s
}
.负载：第n个孩子（3）{
背景#FDA543；
动画延迟：-0.5s
}
.负载：最后一个孩子{
背景：#193B48
}
@关键帧旋转{
0%,
100% {
转换：转换（0）
}
25% {
转换：翻译（160%）
}
50% {
转换：翻译（160%，160%）
}
75% {
转换：转换（0，160%）
}
}
.覆盖{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
不透明度：0.6；
z指数：100；
背景色：#FFFFFF；
}
身体{
背景：#E8F5E9；
背景：重复线性渐变（向右，#FAFAFA，#FAFAFA 50px，#E8F5E9 50px，#E8F5E9 100px）；
}

我爱你，我爱你。。。

预加载程序是覆盖层的子级，因此它将具有父级不透明度，无法避免，但将其设置在覆盖层之外，可能作为同级，并使用负z索引调整覆盖层

至于大小，he忽略了父级大小，因为它们被设置为“位置：固定”，应该是绝对的

正文{
背景：#ECF0F1
}
.家长{
位置：固定；
z指数：1；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.标题{
边缘底部：1米；
颜色：灰色；
位置：相对位置；
z指数：10；
}
.装载{
宽度：50px；
高度：50px；
位置：相对位置；
z指数：10；
保证金：自动；
}
.装载人力资源{
边界：0；
保证金：0；
宽度：40%；
身高：40%；
位置：绝对位置；
边界半径：50%；
动画：旋转2秒轻松无限
}
.第一个孩子{
背景：#19A68C；
动画延迟：-1.5s
}
.负载：第n个孩子（2）{
背景#F63D3A；
动画延迟：-1s
}
.负载：第n个孩子（3）{
背景#FDA543；
动画延迟：-0.5s
}
.负载：最后一个孩子{
背景：#193B48
}
@关键帧旋转{
0%,
100% {
转换：转换（0）
}
25% {
转换：翻译（160%）
}
50% {
转换：翻译（160%，160%）
}
75% {
转换：转换（0，160%）
}
}
.覆盖{
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
不透明度：0.6；
z指数：-10；
背景色：#FFFFFF；
}
身体{
背景：#E8F5E9；
背景：重复线性渐变（向右，#FAFAFA，#FAFAFA 50px，#E8F5E9 50px，#E8F5E9 100px）；
}

我爱你，我爱你。。。