我有一个固定的标题,一切正常,因为当用户在页面上滚动时它会隐藏文本。但是,我注意到,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>
任何人都知道为什么通过固定标题可以看到字形符号?
答案 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”。将显示更改为“内联”解决了这个问题。