Html 使用CSS网格、伪元素和固定定位的神秘行为

我试图把一些文字放在网格的右边，但我不知道为什么它会把背景往下推

可能是

：：在
之后的问题

我不介意任何改变这一点的建议，只要背景分成50%

我真的很感谢你的帮助


：根目录{
--背景色：#f2ef；
--主色：#37384E；
--textColor:#9BBEC7；
}
.网格容器{
显示：网格；
网格模板区域：“左-右”；
网格模板列：50%50%；
网格模板行：100%；
}
身体{
背景：var（--背景色）；
利润率：0%；
}
正文：之后{
内容：''；
位置：固定；
身高：100%；
宽度：50%；
右：50%；
背景：var（--mainColor）；
}
.标志{
利润率：0%；
字体大小：60px；
网格区域：右；
}

jZ
由于伪元素（：after）有一个固定的位置，您需要一些东西作为它应该定位的位置的引用。将“top:0”添加到它，它应该可以工作。
问题
基本问题是渲染顺序

浏览器按以下顺序排列元素：

主体
元素

.grid容器
元素

body:：after
伪元素

首先要注意的是，伪元素最后呈现。为什么？因为它出现在
：：在
主体
元素之后

此时，
.grid container
元素已经占用了它的空间，因此伪元素必须出现在下一行

这个问题的快速而简单的解决方案是从
：after
切换到
：：before
，这样伪元素将移动到渲染顺序中的第一个。完成了

：：在
之后（原始代码）

.grid容器{
显示：网格；
网格模板区域：“左-右”；
网格模板列：50%50%；
}
身体{
背景：var（--背景色）；
保证金：0；
}
正文：：之后{
内容：''；
位置：固定；
高度：100vh；
宽度：50%；
右：50%；
背景：var（--mainColor）；
}
.标志{
保证金：0；
字体大小：60px；
网格区域：右；
}
：根{
--背景色：#f2ef；
--主色：#37384E；
--textColor:#9BBEC7；
}

jZ
top:0到伪元素可能的重复（您可以找到更简单的设置颜色的方法）您最终希望您的页面是什么样子的？你能给我们一张你想要的图片吗？旁注：设置网格比例时，更典型的是使用
fr
单位：
网格模板列：重复（2，1fr）