Question

我遇到以下问题

如果我在标题中放置了可点击的图片，则无法点击它。 （或通用链接，都不起作用）

当我尝试重新定位图像时，在header之外 - 它可以正常工作。但当它仍然在header时，您无法点击它。

＆＃13;

header {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #454d58;
  margin: 0 auto 0 auto;
  z-index: -10;
  min-width: 100%;
}
li {
  position: absolute;
  top: 25px;
}

＆＃13;

<body>
  <header>
    <ul>
      <li>
        <a href="#">
LINK
</a>
      </li>
    </ul>
  </header>
</body>

＆＃13;

Answer 1

您z-index上的结果为header，将其更改为正数或将其删除。

否定z-index在堆叠的上下文顺序中变低，因此您无法点击它

header {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #454d58;
  margin: 0 auto;
  z-index: 1; /*whatever you need - want here - or just remove it */
  min-width: 100%;
}
li {
  position: absolute;
  top: 25px;
}

<body>
  <header>
    <ul>
      <li>
        <a href="#">
LINK
</a>
      </li>
    </ul>
  </header>
</body>

Answer 2

默认情况下，html的所有元素都设置为z-index: 0;。因此，HTML的正文也位于z-index:0;。

当你设置z-index:-10时，它会将标题放在身体后面。因此它不可点击，包括其子元素，即链接

将z-index: -10;更改为z-index: 0;

＆＃13;

header {
position: relative;
width: 100%;
height: 80px;
background-color: #454d58;
margin: 0 auto 0 auto;
z-index: 0;
min-width: 100%;
}


li {
position: absolute;
top: 25px;  
}

＆＃13;

<body>
<header>
<ul>
<li>
<a href="#">
LINK
</a>
</li>
</ul>    				
</header>	
</body>

＆＃13;

Answer 3

不确定你为什么这么说：

z-index: -10;

为什么你需要z-index？您只是将链接放在标题后面，这就是您无法单击它的原因。尝试将其更改为1或将其删除。

<header>中的链接无法点击

3 个答案: