代码之家 › 专栏 › 技术社区 › Sheppard25

固定css掩码图像上方的定位元素

css html javascript

Sheppard25 · 技术社区 · 3 年前

我有带掩码图像的可滚动内容。我需要使用蒙版图像,因为我想对每种背景颜色都有透明度淡出效果。现在我需要设置小孩元件的位置固定在掩模上方。不幸的是,我不能,因为面具似乎还在上面。操纵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>

0 回复 | 直到 3 年前

-1

Manuel Njiakim 3 年前

掩模始终位于应用掩模的组件上方。你为什么不试着从面具上取下你的固定头呢?

.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>