Question

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

我希望有一个标题包含一个“顶栏”，中间有一个品牌标识，也可能是左右两侧的重要链接。徽标应该是可点击的，并且比顶栏本身更大（高度），这意味着它应该与下面的导航重叠。现在的问题是，徽标确实是重叠的，但也阻止了下面的链接与它自己的链接。徽标的可拼接部分应该与“顶栏”的高度一样高。

以下是代码：

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>

CSS：

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;
}

这是一个在行动中看到问题的小提琴。请注意最右边的链接是如何不可点击的，因为它们位于徽标下方？ http://jsfiddle.net/7mLtc3q1/

我有什么选择？我希望它尽可能适合移动设备。提前谢谢！

Answer 1

简短回答：z-index在没有相对或绝对定位元素的情况下无法工作，因此在position: relative选择器上添加position: absolute或header .top-bar。

Answer 2

您可以将pointer-events:none添加到.logo-brand班级：

<强> jsFiddle example

Answer 3

以下是您如何解决问题的简单概念。

由于徽标品牌/图片是“方形”，其左下角/右下角将覆盖导航栏，除非您将其放在导航栏下方。

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

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

正如您所看到的，红色圆形只会在您悬停在其中时产生反应，而不是在其“右/左下角”通常为圆形时的位置。

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

foo_obj

header .top-bar {
  height: 48px;
  position: relative;
  z-index: 2;
}

header .top-bar div {
  position: absolute;
  height: 70px;
  overflow: hidden;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  background-color: red;
  width: 240px;
  border-radius: 50% / 100%;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

header .top-bar div:hover {
  background-color: blue;
}

header .navbar {
   background-color: lightgray;
   height: 60px;
}

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

3 个答案: