Html 导航顶部的Div，带有重叠的可点击徽标

我在解决这个问题时遇到了一些问题：

我想有一个标题，包括一个“顶部酒吧”，中间有一个品牌标志，也许还有一些重要的左右链接。 徽标应该是可点击的，并且比顶部栏本身更大（高度），这意味着它应该与下面的导航重叠。现在的问题是，这个标志确实是重叠的，但也用它自己的链接阻塞了下面的链接。徽标的可点击部分应仅与“顶栏”的高度相同

代码如下：

HTML

<header role="banner">
    <div class="top-bar">
      <div class="logo-brand">
        <a href="/test">
              <img src="http://i.imgur.com/pKkt4bq.png" alt="Welcome" id="logo">
            </a>
      </div>
    </div>
    <nav class="navbar navbar-default ng-scope" role="navigation" ng-controller="navbarCtrl">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" ng-click="isCollapsed = !isCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div uib-collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse collapse" style="height: 0px;">
          <ul class="nav navbar-nav">
            <li><a href="#">New</a></li>
            <li><a href="#">Load</a></li>
            <li><a href="#">Save</a></li>
            <li><a href="#">Assign</a></li>
            <li><a href="#">Help</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

这里有一个小提琴，看看问题的实际行动。注意最右边的链接是如何不可点击的，因为它们位于徽标下方？

我有什么选择？我希望这是移动友好的尽可能。

---

提前谢谢

简短回答：如果没有相对或绝对定位元素，z-index将无法工作，因此在

标题上添加
位置：相对
或
位置：绝对
。顶部栏

选择器。

下面是一个简单的概念，说明如何解决问题

由于徽标品牌/图像为“正方形”，其左/右下角将覆盖导航栏，除非您将其置于导航栏下方

如果导航栏有背景色或图像，则将其置于下方会导致问题，但会“切割”导航栏开始处的可单击徽标

下面的代码片段通过将徽标/图像边框底部设置为圆形来显示，使导航栏的左/右底部部分“未覆盖”

正如您所看到的，红色圆角仅在您将鼠标悬停在其中时才会起作用，而不是在其“右/左下角”通常位于的位置（如果不圆角）

另一种方法，此处未显示，将徽标切成2段，并将下部作为导航栏的背景，尽管这会稍微复杂一些

标题。顶栏{
高度：48px；
位置：相对位置；
z指数：2；
}
标题。顶栏div{
位置：绝对位置；
高度：70像素；
溢出：隐藏；
左：0；
右：0；
左边距：自动；
右边距：自动；
背景色：红色；
宽度：240px；
边界半径：50%/100%；
边框左上半径：0；
边框右上角半径：0；
}
标题。顶栏div：悬停{
背景颜色：蓝色；
}
标题.导航栏{
背景颜色：浅灰色；
高度：60px；
}

---

您可以将

指针事件：无

添加到您的

。徽标品牌

类别：

---

这不会修复徽标下方的不可单击区域。正如我所说的，图像的链接应该只与顶部栏本身一样高，因此不应该与导航栏重叠。我用你的建议更新了小提琴：还是谢谢你！很抱歉，但在检查了小提琴中提供的图像后。。。图像太高了。它将始终与下面的导航栏重叠。一个可能的解决方案是在

.top bar

容器上设置一个绝对高度（您已经用48px获得了），该高度低于图像重叠的高度，并添加

溢出：可见的
，但我不能保证这将解决当前的问题。这可能是最好的解决方案，尽管值得补充的是，它只在IE11中起作用。
header .top-bar {
  height: 48px;
  z-index: 100;
  background: url('../../data/images/top-links.jpg') repeat-x;
}

header .top-bar .logo-brand {
  position: absolute;
  width: 429px;
  z-index: 2;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
}