Html 如何重叠用户星级？半星级酒店；满星变成一星

如何重叠用户星级？半星和全星变成一星。我在评级部分有问题

请在所附链接中查看我的代码

：根目录{
--白色：#F3；
--颜色深蓝色：#1b1b32；
--颜色深蓝色alpha:rgba（27,27,50,0.8）；
--绿色：#37af65；
}
*,
*：：之前，
*：：之后{
框大小：边框框；
}
身体：：之前{
内容：''；
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
z指数：-1；
字体系列：“Poppins”，无衬线；
字号:1rem ;；
字体大小：400；
保证金：0；
颜色：var（--白色）；
线高：1.4；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
背景色：var（--颜色深蓝色）；
背景图像：线性梯度（115度，rgba（58,58,158,0.5），rgba（136,136,206,0.5）），url(https://i.postimg.cc/B6W8JdzD/stars.png);
}
.集装箱{
宽度：100%；
保证金：3.125rem自动0自动；
}
@介质（最小宽度：576px）{
.集装箱{
最大宽度：540像素；
}
}
@介质（最小宽度：768px）{
.集装箱{
最大宽度：720px；
}
}
h1{
字体大小：400；
线高：1.2；
}
p{
字体大小：1.12rem；
}
h1，
p{
边际上限：0；
边缘底部：0.5雷姆；
颜色：白色；
}
标签{
显示器：flex；
对齐项目：居中；
字体大小：1.125rem；
边缘底部：0.5雷姆；
颜色：白色；
}
输入，
按钮
选择，
文本区{
保证金：0；
字体家族：继承；
字体大小：继承；
行高：继承；
}
钮扣{
边界：无；
}
.头{
填充：0.625雷姆；
保证金底部：1.25雷姆；
}
1.解释{
字号：200；
字体：斜体；
文本阴影：1px1px1pRGBA（0,0,0,0.4）；
文本对齐：居中；
}
.标题{
文本对齐：居中；
}
.描述{
保证金底部：1.45雷姆；
}
/*形式*/
形式{
背景：var（--颜色深蓝色alpha）；
边界半径：0.25雷姆；
填充物：2.5雷姆0.625雷姆；
}
@介质（最小宽度：480px）{
形式{
填充物：2.5雷姆；
}
}
.表格名称{
保证金：0自动1.25rem自动；
填充：0.25rem；
}
.表格管制{
显示：块；
宽度：100%；
高度：2.375雷姆；
填充：0.375雷姆0.75雷姆；
颜色：#495057；
背景色：#fff；
背景剪辑：填充框；
边框：1px实心#ced4da；
边界半径：0.25雷姆；
过渡：边框颜色0.15s缓进缓出，框阴影0.15s缓进缓出；
}
.窗体控件：焦点{
边框颜色：#80bdff；
大纲：0；
长方体阴影：0.2rem rgba（0,123,255,0.25）；
}
.输入收音机，
.输入复选框{
显示：内联块；
保证金权利：0.625雷姆；
最小高度：1.25雷姆；
最小宽度：1.25雷姆；
}
.输入文本区{
最小高度：120px；
宽度：100%；
填充：0.625rem；
调整大小：垂直；
}
.提交按钮{
显示：块；
宽度：100%；
填充：0.75rem；
背景：var（--绿色）；
颜色：继承；
边界半径：2px；
光标：指针；
}
/*评级科*/
字段集，
标签{
保证金：0；
填充：0；
}
身体{
利润率：20px；
}
h1{
字号：1.5em；
利润率：10px；
}
/******样式星级小部件*****/
.评级{
边界：无；
浮动：左；
}
.评级>输入{
显示：无；
}
.评级>标签：之前{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.rating>.half:：之前{
内容：“\f089”；
位置：绝对位置；
}
.评级>标签{
颜色：#ddd；
浮动：对；
}
/*****CSS魔术突出悬停上的星星*****/
.评级>输入：选中~标签，
.额定值：未（：选中）>标签：悬停，
.额定值：未（：选中）>标签：悬停~标签{
/*单击时显示金星*/
/*悬停当前恒星*/
颜色：#ffd700；
}
/*悬停列表中的前几颗星*/
.评级>输入：选中+标签：悬停，
.评级>输入：选中~标签：悬停，
.评级>标签：悬停~输入：选中~标签，
.评级>输入：选中~标签：悬停~标签{
/*更改额定值时悬停当前星号*/
/*减轻电流选择*/
颜色：#ffed85；
}

收视率

添加以下CSS

.rating>标签：第n个子项（偶数）{
转化：translateY（-50%）；
}

我给你写了一个片段。请修复CSS，使其成为“是”。谢谢。它解决了我的问题。你能解释一下你为什么添加这个的逻辑吗？是的，关键是

位置：绝对
。因此，从同一原点开始渲染两个不同的元素。请投赞成票并接受答案。