悬停时的图像与粘性标题重叠答案

【问题标题】：Image when hovered overlaps sticky header悬停时的图像与粘性标题重叠
【发布时间】：2020-02-12 03:10:19
【问题描述】：

我有一个网格，其中图像链接到文章，当图像悬停时，它们会变暗，但如果当时粘性标题在它们上方，则将它们悬停会与标题重叠。我试过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>

【问题讨论】：

标签： html css hover sticky overlapping

【解决方案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>

【讨论】：