如何让元素固定在滚动父容器顶部？解决渐变层叠问题

我需要让渐变效果固定在滚动div的顶部，试了两种方法都存在问题：

方法一：position:absolute #

这种方式在滚动到顶部时显示正常，但滚动内容时渐变会跟着内容一起消失：

div {
background-color: red;
width: 200px;
height: 200px;
overflow-y: scroll;
position: relative;
}

p {
border: solid 1px blue;
height: 300px;
}

div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: linear-gradient(to bottom, green, transparent);
}

<div>
<p>hello</p>
</div>

方法二：position:sticky #

这种方式能让渐变在滚动时固定在顶部，但滚动到顶部时，渐变会显示在顶部元素的上方，无法覆盖在内容之上：

div {
background-color: red;
width: 200px;
height: 200px;
overflow-y: scroll;
position: relative;
}

p {
border: solid 1px blue;
height: 300px;
}

div::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: linear-gradient(to bottom, green, transparent);
    display: block;
}

<div>
<p>hello</p>
</div>

可行的解决方案（无需新增嵌套容器） #

方案1：优化absolute实现 #

给伪元素添加z-index: 1，确保它始终在内容上方，同时保持position:absolute，这样渐变会固定在容器顶部，不会被滚动的内容遮挡：

div {
background-color: red;
width: 200px;
height: 200px;
overflow-y: scroll;
position: relative;
}

p {
border: solid 1px blue;
height: 300px;
position: relative;
z-index: 0; /* 确保内容层级低于渐变 */
}

div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1em;
    background: linear-gradient(to bottom, green, transparent);
    z-index: 1;
    pointer-events: none; /* 可选：避免渐变层阻挡内容交互 */
}

方案2：使用多层背景实现 #

不需要伪元素，直接给容器设置多层背景，让渐变固定在顶部：

div {
width: 200px;
height: 200px;
overflow-y: scroll;
/* 第一层为顶部渐变，第二层为红色背景 */
background: 
    linear-gradient(to bottom, green, transparent) top / 100% 1em no-repeat,
    red;
}

p {
border: solid 1px blue;
height: 300px;
}

<div>
<p>hello</p>
</div>

这种方法更简洁，利用background的多层语法，渐变会始终固定在容器的顶部区域，不会随内容滚动。

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