html - 为什么有些元素在不设置 z-index 的情况下无法访问

Question

有时，如果不将 z-index 设置为某个 +ve 值，某些 HTML 元素将无法访问。例如，如果我在这里注释掉带有 z-index 的行，则图像不再可点击，悬停效果也不起作用。谁能告诉我为什么会这样？如果这是一个愚蠢的问题，请在 adv 中道歉。我是 html 和 css 的新手

CSS(不工作):

 .social-media{
    position: absolute;
    left: 750px;
    top: 15px;
    margin: 10px;
}

.smediaimg {
    position: relative;
    top: 45px;
    height: 30px;
    width: 30px;
    margin: 10px;
    /*z-index: 1;*/       //hover effect not working and img is not-clickable
}

.smediaimg:hover{
    transform: scale(1.5);
    transition-duration: 0.5s;
}

CSS(工作):

.social-media{
        position: absolute;
        left: 750px;
        top: 15px;
        margin: 10px;
    }

    .smediaimg {
        position: relative;
        top: 45px;
        height: 30px;
        width: 30px;
        margin: 10px;
        z-index: 1;       //setting z-index to +ve solves it
    }

    .smediaimg:hover{
        transform: scale(1.5);
        transition-duration: 0.5s;
    }

HTML:

<div class="social-media">
      <h4>SOCIAL MEDIA HANDLES</h4>
      <span>
        <a href="#"><img class="smediaimg" src="..\fb.png"></a>
        <a href="#"><img class="smediaimg" src="..\insta.png"></a>
        <a href="#"><img class="smediaimg" src="..\twitter.jpg"></a>
        <a href="#"><img class="smediaimg" src="..\yt.jpg"></a>
        <a href="#"><img class="smediaimg" src="..\linkedin.png"></a>
      </span>
</div>

这是它的样子:

Answer 1

z-index 属性与页面中的图层有关。当两个元素相互重叠时。为了控制什么应该出现什么不应该由 z-index 控制。因此，在您尚未定义 z-index 的代码中。有一些元素遮盖了图像。调试的最佳方式是 chrome 开发者工具。执行 ctrl + shift + I 并检查与图像重叠的元素。`