固定元素在css mask-image上方的位置

Question

我有可滚动的内容与蒙版图像。我需要使用蒙版图像，因为我想对每个背景颜色都有透明淡出效果。现在我需要设置子固定在掩模上方的元件。不幸的是，我不能，因为看起来面具还在上面。操纵z-index不工作

.faded {
z-index: 1;
background: red;
width: 150px;
height: 100px;
overflow: auto;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%)
}
.fixed-header {
position: fixed;
top: 0;
background: green;
left: 0;
z-index: 99999;
}

<div class="faded">
<div class="fixed-header">
Fixed Header
</div>
1) Item 1 - Test<br />
2) Item 2 - Test<br />
3) Item 3 - Test<br />
4) Item 4 - Test<br />
5) Item 5 - Test<br />
6) Item 6 - Test<br />
7) Item 7 - Test<br />
8) Item 8 - Test<br />
9) Item 9 - Test<br />
10) Item 10 - Test<br />
11) Item 11 - Test<br />
12) Item 12 - Test<br />
13) Item 13 - Test<br />
14) Item 14 - Test<br />
15) Item 15 - Test<br />
</div>

Answer 1

遮罩总是位于应用它的组件上方。你为什么不试着从掩码中删除你的固定头呢?

.faded {
z-index: 1;
background: red;
width: 150px;
height: 100px;
overflow: auto;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%)
}
.fixed-header {
position: fixed;
top: 0;
background: green;
left: 0;
z-index: 99999;
}

<div class="container">
<div class="fixed-header">
Fixed Header
</div>
<div class="faded">
1) Item 1 - Test<br />
2) Item 2 - Test<br />
3) Item 3 - Test<br />
4) Item 4 - Test<br />
5) Item 5 - Test<br />
6) Item 6 - Test<br />
7) Item 7 - Test<br />
8) Item 8 - Test<br />
9) Item 9 - Test<br />
10) Item 10 - Test<br />
11) Item 11 - Test<br />
12) Item 12 - Test<br />
13) Item 13 - Test<br />
14) Item 14 - Test<br />
15) Item 15 - Test<br />
</div>
</div>