Question

我有一个带有'标题'的div，其z-index值为1.在该div之后，我在锚标记中有一个div作为徽标。但问题是我没有在'徽标'上得到任何指针光标。如果我删除标题的z-index我可以点击它。我有.header如下：

.header{
  z-index:1;
}

以下是我得到的结果：

Output i am getting...

请删除我为z-index提供的css部分中的注释。您可以再次点击徽标。

有没有办法让'标头'上的z-index值为1的锚标签？

Answer 1

为什么你绝对定位东西？如果你想让你的代码工作，你需要将你的标签定位为相对或绝对，并给它一个更高的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 2

只需将指针事件：none添加到阻止链接点击的父级（因此到标题）。

此处您的代码已更新： https://jsfiddle.net/pThNz/31/

.header {
    pointer-events:none
}

Answer 3

z-index不会影响非位置的元素：绝对，相对或静态

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

由于z-index，href标记无法正常工作

3 个答案: