Question

我有这个页面：http://highvision.vn/haisan/ 并且左侧有链接，但是我无法点击它们。

有谁知道为什么？

这是我的CSS：

 .menu {
    background:url(images/menu-bg.png) no-repeat top left;
    width:287px;
    height:492px;
    margin: -20px 0 0 -80px;
    padding: 55px 0 0 60px;


}
.menu div {
    /* Rotate div */
    -ms-transform: rotate(-4deg); /* IE 9 */
    -webkit-transform: rotate(-4deg); /* Chrome, Safari, Opera */
    transform: rotate(-4deg);


}
.menu div {
    margin-bottom: 17px;
}
.menu div a {
    color:#FFF;
    font-family: 'Lobster', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;

}

Answer 1

删除＆＃34; z-index ＆＃34;在你的班级＆＃34; 正文＆＃34;

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
  <div id="second-nav" class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">press</a>
      </li>
      <li><a href="#">login</a>
      </li>
      <li><a href="#">...</a>
      </li>
    </ul>
  </div>
  <!-- /.container-fluid -->
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Beratungsansatz<span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">FOO</a>
        </li>
        <li><a href="#">BAR</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

然后添加＆＃34; 位置＆＃34;和＆＃34; z-index ＆＃34;到你的＆＃34; .menu div ＆＃34;

.body {
    padding: 0;
    position: relative;
}

Answer 2

元素<div class="pos-5">和包装元素的z-index比其他菜单项高。您需要为菜单链接设置更高的z-index（或使元素不会模糊菜单链接）

这个CSS会按正确的顺序排列：

.wrapper {
    z-index: 0;
}
.menu div {
    z-index: 10;
}

Answer 3

这是因为你已经使用类＆＃34; body＆＃34;将一个z-index为-1添加到div中。

CSS HTML无法单击链接

3 个答案: