2016-03-07 73 views
0

我有一个固定的标题,一切正常,因为它隐藏了用户在页面上滚动的文本。但是,我注意到图形中的图标通过固定标题的背景显示。我的CSS是HTML固定标题不隐藏glyphicons

#taskHeader{ 
    background: lightgrey; 
    position: fixed; 
    width: 100%; 
    opacity: 1.0; 
} 

这个固定头在HTML定义如下:

<div class= "row" id="taskHeader"> 
    <div class="col-md-6"><%= @task.name %></div> 
    <div class="col-md-6"><%= @task.description%></div> 
</div> 

然后,我有一个包含glphyicon标题:

<h2> Subtasks 
    <span class="glyphicon glyphicon-adjust"></span> 
</h2> 

任何人都有一个想法,为什么通过固定标题可以看到图形?

+0

你能不能包括你的html也 –

+0

添加了相关的html代码。 –

+0

你可以在jsfiddle中重新创建你的问题,这样我们可以看看整个事情吗? – c00ki3s

回答

1

提供与字形相关的CSS代码会很有帮助。

然而,根据您提供的信息,我认为glyhicons可能具有比#taskHeader更高的z-index - 在这种情况下,当您滚动浏览它们时,它们将显示在标题顶部,就好像它们一样按照您的说法“显示”标题。尝试设置#taskHeader的z-index高于页面上的任何其他元素。例如,请尝试:

#taskHeader{ 
    background: lightgrey; 
    position: fixed; 
    width: 100%; 
    opacity: 1.0; 
    z-index: 10; 
} 

只要确保您使用的z-index值是页面上最高的(我认为在大多数情况下可以使用10)。

如果解决了这个问题,那么对于图形(或其容器元素)而言,您有一个冲突的z-index。

(还有你也许并不需要一个元素定义1.0的不透明度值,因为这是默认设置)

0

在我的情况下,使用材料设计glyphicons(.MDI),罪魁祸首是“显示器:直列块”。将显示更改为“内联”解决了问题。