如何在保持链接可点击的同时将图像放在Bootstrap NavBar的顶部？

Question

我正在尝试创建一个Boostrap UI，其中桌面视图（＆gt; = 992px）将在NavBar上方有一个徽标。我创造了以下小提琴：

http://jsfiddle.net/4qd79699/

要将徽标放在我想要的位置，我有以下CSS：

.navbar {
   top: -40px;
}

但是，正如您所看到的（您可能需要将结果视图扩展到992px），徽标位于NavBar后面（这很有意义）。现在，如何在点击链接的同时将徽标放在NavBar的顶部？

我尝试添加以下内容：

.navbar {
   top: -40px;
   z-index: -1;
}

然后显示我想要的但我无法点击导航栏上的链接。出于某种原因，我无法带上徽标＆＃34; up＆＃34;通过切换 z-index 。

Answer 1

为图像添加样式显示：block;并删除导航栏顶部：-40px

Answer 2

只需将position:absolute;添加到包含图片的锚点，您就可以相应地调整图像的边距。

以下是其中的一个例子：http://jsfiddle.net/o49v85Lh/1/