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

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>

标签： htmlcsshoverstickyoverlapping

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>