有时,如果不将 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>
这是它的样子:
最佳答案
z-index 属性与页面中的图层有关。当两个元素相互重叠时。为了控制什么应该出现什么不应该由 z-index 控制。因此,在您尚未定义 z-index 的代码中。有一些元素遮盖了图像。
调试的最佳方式是 chrome 开发者工具。执行 ctrl + shift + I
并检查与图像重叠的元素。
`
关于html - 为什么有些元素在不设置 z-index 的情况下无法访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58281506/