html - 为什么 z-index 会阻止 div 中嵌入的项目被访问？

Question

我通过将 div 嵌入到形成网格区域的 div 中，在我的网站上制作了一个侧面板。当我将鼠标悬停在它们上方时，我希望它们改变颜色，但什么也没发生。后来我通过改变网格区域的z-index解决了这个问题。它最初设置为 -1，但我从 CSS 中删除了它，它解决了问题。虽然我已经解决了这个问题，但我想了解为什么 z-index 会产生这种效果。以下是原始代码的摘录。

#box-b {
    background: blue;
    grid-area: b;
    z-index: -1
    }
    
.main {
      display: grid;
      grid-template-areas: "a a"
                           "b c";
      grid-template-rows: 40px 800px;
      grid-template-columns: 1fr 4fr;
      }

.side-tile {
            height: 35px;
            border-right: 2px solid black;
            border-left: 2px solid black;
            border-bottom: 1px solid black;
            border-top: 1px solid black;
            text-align: center;
            padding-top: 15px;
            }
            
.side-tile:hover {
                  background: #00007f;
                  border-right: 2px solid red;
                  border-left: 2px solid red;
                  border-top: 1px solid red;
                  border-bottom: 1px solid red;
                  cursor: pointer;
                  }      

<div class="main">
    <div id=box-b>
      <div class=side-tile>
      A
      </div>
      <div class=side-tile>
      B
      </div>
      <div class=side-tile>
      C
      </div>
      <div class=side-tile>
      D
      </div>
      <div class=side-tile>
      E
      </div>
      <div class=side-tile>
      F
      </div>
    </div>
  </div>

标签： htmlcss