Html CSS"；位置：固定"；滚动文本重叠问题

在这种情况下，如何避免标题文本重叠？ 为什么上面的部分溢出是隐藏的，下面的部分溢出是可见的

演示：

正文{
保证金：0；
}
第一节英雄{
位置：相对位置；
高度：100vh；
溢出：隐藏；
}
第3.h1节{
显示：块；
位置：固定；
文本对齐：居中；
宽度：100%；
最高：50%；
}
章节：第一个孩子{
边际上限：0；
}
.bg1{
背景：黄色；
}
.bg2{
背景：青色；
}
.bg3{
背景：洋红；
}

演示
0
1.
2.

应用

剪辑路径

或

遮罩

隐藏

位置：固定

。溢出不适用于

位置：已修复

正文{
保证金：0；
}
第一节英雄{
位置：相对位置；
高度：100vh；
剪辑路径：多边形（0 0100%0100%100%，0 100%）；
/*或
-webkit掩模：线性梯度（#fff，#fff）；
掩模：线性梯度（#fff，#fff）；
*/
}
第3.h1节{
显示：块；
位置：固定；
文本对齐：居中；
宽度：100%；
最高：50%；
}
章节：第一个孩子{
边际上限：0；
}
.bg1{
背景：黄色；
}
.bg2{
背景：青色；
}
.bg3{
背景：洋红；
}

0
1.
2.