html - 由于 z-index，href 标记不起作用

Question

我有一个带有“标题”类的 div，它的 z-index 值为 1。在该 div 之后，我在锚标签中有一个用于徽标的 div。但问题是我在“徽标”上没有任何指针光标。如果我删除标题的 z-index，我可以点击它。我有 .header 如下：

.header{
  z-index:1;
}

这是我得到的结果：

我得到的输出...

只需删除我为 z-index 给出的 css 部分中的注释。您将能够再次单击该徽标。

有没有办法让锚标签在“标题”上使用 z-index 值作为 1？

Answer 1

只需将 pointer-events:none 添加到阻止链接单击的父级（因此到标题）。

这是您更新的代码： https ://jsfiddle.net/pThNz/31/

.header {
    pointer-events:none
}

Answer 2

你为什么要绝对定位？如果你想让你的代码工作，你需要将你的标签相对或绝对定位，并给它一个更高的 z-index：

http://jsfiddle.net/pThNz/11/

a {position:relative; z-index:2;}

否则，您可以尝试这样的方法来获得更好的代码；阻止您稍后进入 z-index 噩梦；并停止在各处创建空 div：

http://jsfiddle.net/pThNz/10/

<div class="header">
  <a href="http://therepublik.ambibytes.com/" title="Home">
    <span class="leftCorners">
      <span class="rightCorners">
        <span class="text">The fuzzy Republik</span>
      </span>
    </span>
  </a>
</div>

CSS：

.header a {margin:20px; font-size: 20px; color: black; text-transform: uppercase; text-decoration:none; text-align:center; }
.header a,
.header span {display:block; width:283px; height:100px;}
.leftCorners {background:url(http://therepublik.ambibytes.com/wp-content/themes/republik/imgs/left_corners.gif) left top no-repeat;}
.rightCorners {background:url(http://therepublik.ambibytes.com/wp-content/themes/republik/imgs/right_corners.gif) right top no-repeat;}
.header .text {padding-top:45px; height:50px;}

Answer 3

z-index 不影响不是位置的元素：绝对、相对或静态

.header{
  z-index:1;
  position:relative;
}