HTML固定标题不隐藏字形

时间:2016-03-07 19:16:38

标签: html css

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

#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>

任何人都知道为什么通过固定标题可以看到字形符号?

2 个答案:

答案 0 :(得分:2)

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

但是根据您提供的信息,我认为这些信息的z-index可能比#taskHeader更高 - 在这种情况下,当您滚动过去时,它们会显示在标题的顶部他们,好像他们&#34;透过&#34;你说的标题。尝试设置#taskHeader,其z-index高于页面上的任何其他元素。例如,尝试:

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

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

如果这样可以解决问题,那么glyphicons(或其容器元素)的z-index就会有冲突。

(你也可能不需要在元素上定义1.0的不透明度值,因为这是默认值)

答案 1 :(得分:0)

就我而言,使用Material Designs glyphicons(.mdi),罪魁祸首是“display:inline-block”。将显示更改为“内联”解决了这个问题。