在导航栏后面显示 Glyphicon答案

【问题标题】：Show Glyphicon behind Navbar在导航栏后面显示 Glyphicon
【发布时间】：2017-04-19 19:59:07
【问题描述】：

我的页面上有一个登录表单，其中在用户和传递字段中有 2 个引导字形图标。问题是当它们滚动经过时，它们会显示在我的粘性导航栏上方。

我尝试将 z-index 设置为小于导航栏的值（即 navbar=1 图标=0），但没有奏效。

为什么会发生这种情况，我该如何防止这种行为？

【问题讨论】：

你有小提琴吗？ z-index 应该可以工作，尽管将position: relative 应用于登录表单的包含<div>。
使用 z-index 是正确的方法。您的实施有问题。请使用jsfiddle.net 帮助我们了解您是如何实现它的。
我无法用小提琴复制问题：S jsfiddle.net/MgcDU/7401
@MackieeE 抱歉，我现在没有时间设置小提琴，因为它是一个基于 joomla 的网站，设置有点复杂，但我会在可以复制时回帖问题。然而，令人困惑的一件事是父 div 被导航栏隐藏...
不用担心，但请编辑您的答案以包含哪个版本的 Bootstrap！ :)

标签： css twitter-bootstrap glyphicons

【解决方案1】：

我通过改变 CSS 中的 position 属性，在滚动时通过引导导航栏的 Glyphicons 解决了这个问题。

.glyphicon {
    position: static;
}

【讨论】：

【解决方案2】：

恢复一个旧线程......我自己遇到了这个问题，并认为我会分享我的解决方案。

我使用的字体很棒，所以当我需要使用字形图标时，我添加了一个 fa 类。 fa 类看起来像这样。

.fa{display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translate(0, 0);}

我刚刚从类中删除了 transform:translate(0, 0) 并且它运行良好。字体真棒和引导程序在字形图标方面非常相似，因此它应该适用于两种情况......希望这对某人有所帮助。

【讨论】：