Angular sticky吸顶头部滚动时内容未被头部遮挡问题

position: sticky实现的吸顶元素默认是透明背景，且没有设置更高的层叠优先级，滚动时下层主内容自然会从透明区域透出。你之前给.my-content加overflow属性属于改错了方向，overflow只负责控制元素自身内容的溢出裁切逻辑，管不到不同元素之间的层叠显示关系。

直接修改.sticky类的样式，补充两个必填属性即可：

.sticky {
    position: sticky;
    position: -webkit-sticky;  
    top: 0;  
    overflow: hidden;
    /* 新增以下两行 */
    background: #ffffff; /* 替换为你页面实际使用的全局背景色即可 */
    z-index: 10; /* 确保吸顶层级高于普通文档流内容 */
}

之前给.my-content加的overflow: hidden !important可以直接删掉，该属性对解决透传问题没有任何作用，留着反而可能引发内容区滚动异常、内部下拉弹窗/浮层被裁切的问题。

• 普通文档流内的元素默认层叠等级（z-index）为0，给吸顶容器设置更高的z-index，才能保证它在层叠上下文中排在主内容上方，不会被滚动上来的主内容覆盖
• 吸顶容器必须设置不透明背景，否则哪怕层级正确，透明区域依然会透出下方的滚动内容

内容的提问来源于stack exchange，提问作者c0micrage