html css中多个粘性元素的问题

我有像2020年3月1日这样的“信息”类的部门 其css为-

.info{
       position:sticky;
       top:0;
   }

但所有这些div在滚动时都是重叠的。
如何解决重叠问题？
我的意思是，如果新的粘滞元素碰到了前一个粘滞元素，那么前一个粘滞元素应该像中给出的那样消失

正文{
字号：1em；
用户选择：无；
背景色：#E0；
字体系列：无衬线；
字体大小：100%；
}
/*多粘滞元素css——启动*/
.info{
位置：粘性；
排名：0；
}
/*多个粘性元素css_______;结束*/
主要{
宽度：50%；
最小宽度：550px；
保证金：0自动；
背景色：#E0；
高度：300px；
溢出y：滚动；
}
#包裹{
填充物：5px；
显示：网格；
网格间距：2px；
位置：相对位置；
z指数：1；
}
#好的，好的{
宽度：80%；
左：20%；
显示器：flex；
证明内容：柔性端；
}
#包，左包{
显示器：flex；
调整内容：灵活启动；
宽度：80%；
}
.右包装.短信部分{
背景色：#dbf4c6；
边界半径：7.5px；
填充：6px 7px 8px 9px；
}
.left_wrap.sms_部分{
背景色：#F4；
边界半径：7.5px；
填充：6px 7px 8px 9px；
}
.sms_组{
显示：网格；
网格模板列：1fr 48px；
}
.左(左)次,，
.是时候了{
网格柱：2/3；
网格行：2；
利润上限：-6px；
}
#输入{
位置：粘性；
底部：0；
文本对齐：左对齐；
背景色：#D0；
填充：5px 0 5px 5px；
盒影：0.20px-11px；
}
输入[type='text']{
字体大小：16px；
宽度：80%；
边界半径：2px；
边界：无；
填充物：5px；
}

2020年3月1日
left message left message left message message message message message message message message message message message message message message message message message message message message message message消息JKJKJKJKJKKJKKKJJKKKKJKJKJKJKJKJKJKJKJKJKJKJKJ
4.06AM
2020年3月2日
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM
左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息左消息
4.06AM
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM
昨天
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM
左侧消息左侧消息左侧消息左侧消息左侧消息
4.06AM

在信息类中添加了z索引和背景色

正文{
字号：1em；
用户选择：无；
背景色：#E0；
字体系列：无衬线；
字体大小：100%；
}
/*多粘滞元素css——启动*/
.info{
位置：粘性；
排名：0；
背景：#e0；
z指数：12；
}
/*多个粘性元素css_______;结束*/
主要{
宽度：50%；
最小宽度：550px；
保证金：0自动；
背景色：#E0；
高度：300px；
溢出y：滚动；
}
#包裹{
填充物：5px；
显示：网格；
网格间距：2px；
位置：相对位置；
z指数：1；
}
#好的，好的{
宽度：80%；
左：20%；
显示器：flex；
证明内容：柔性端；
}
#包，左包{
显示器：flex；
调整内容：灵活启动；
宽度：80%；
}
.右包装.短信部分{
背景色：#dbf4c6；
边界半径：7.5px；
填充：6px 7px 8px 9px；
}
.left_wrap.sms_部分{
背景色：#F4；
边界半径：7.5px；
填充：6px 7px 8px 9px；
}
.sms_组{
显示：网格；
网格模板列：1fr 48px；
}
.左(左)次,，