为什么不设置z-index

Question

有时，某些HTML元素如果不将其z-index设置为+ ve值就无法访问。例如，在这里，如果我用z-index注释掉该行，则该图像不再可单击，悬浮效果也不起作用。谁能告诉我为什么呢？如果这是一个愚蠢的问题，请对不起。我是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并检查与图像重叠的那个元素。 `

Answer 2

很可能是因为其他某些元素太大或有些其他问题。您可以转到控制台，单击“检查元素”按钮，然后将其悬停（不要单击）在社交媒体图像上。您可能会选择另一个元素。

使用您当前的代码，没什么错，但是如果您检查其他元素代码，它可能会给您一些启示。可能是绝对位置的东西。