悬停时的图像与粘性标头重叠

Question

我有一个网格，图像链接到文章，并且当图像悬停时，它们变得更暗，但是如果那时粘性标头位于它们上方，则将它们悬停会覆盖标头。我已经尝试过z-index，但是它不起作用。

除了使标头固定之外，还有其他方法可以解决此问题，因为标头上方有一些带有徽标和链接的信息，并且在悬停时切换具有相同但较暗版本的图像似乎不是一种很好的解决方案。

图像：

header {
  background-color: red;
  padding: 10px;
  position: sticky;
  top: 0;
}

.test {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  margin: 50px;
}

.test1 {
  grid-column: 1 / 3;
  background-color: yellow;
}

.test2 {
  grid-column: 1 / 2;
  background-color: blue;
}

.test3 {
  grid-column: 2 / 3;
  background-color: green;
}

.image:hover {
  filter: brightness(0.8);
}

    <p>To make header sticky</p><br>
    <p>To make header sticky</p><br>
    
    <header>
      <p>
        Sticky header Sticky header Sticky header Sticky header
      </p>
    </header>
    
    
    
    <div class="test">
    
      <div class="test1">
        TEST1
      </div>
    
    
      <div class="test2 image">
        IMAGE1
      </div>
    
    
      <div class="test3 image">
        IMAGE2
      </div>
    
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

将z-index添加到标题。

header {
  background-color: red;
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.test {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  margin: 50px;
}

.test1 {
  grid-column: 1 / 3;
  background-color: yellow;
}

.test2 {
  grid-column: 1 / 2;
  background-color: blue;
}

.test3 {
  grid-column: 2 / 3;
  background-color: green;
}

.image:hover {
  filter: brightness(0.8);
}

<p>To make header sticky</p><br>
    <p>To make header sticky</p><br>
    
    <header>
      <p>
        Sticky header Sticky header Sticky header Sticky header
      </p>
    </header>
    
    
    
    <div class="test">
    
      <div class="test1">
        TEST1
      </div>
    
    
      <div class="test2 image">
        IMAGE1
      </div>
    
    
      <div class="test3 image">
        IMAGE2
      </div>
    
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>