html - 悬停时的图像与粘性标题重叠

Question

我有一个网格，其中图像链接到文章，当图像悬停时它们会变暗一点，但如果当时粘性标题在它们上方，则将它们悬停在标题上。我试过使用 z-index 但它不起作用。

除了固定标题外，还有什么方法可以解决此问题，因为我在标题上方有一些带有 Logo 和链接的信息，并且在悬停时切换具有相同但较暗版本的图像似乎不是优雅的解决方案。

图片:

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>