HTML固定標題不隱藏glyphicons

我有一個固定的標題，一切正常，因爲它隱藏了用戶在頁面上滾動的文本。但是，我注意到圖形中的圖標通過固定標題的背景顯示。我的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>

任何人都有一個想法，爲什麼通過固定標題可以看到圖形？

來源

2016-03-07 Megan Woodruff

你能不能包括你的html也 –

添加了相關的html代碼。 –

你可以在jsfiddle中重新創建你的問題，這樣我們可以看看整個事情嗎？ – c00ki3s

提供與字形相關的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的不透明度值，因爲這是默認設置）

來源

2016-03-07 19:53:17 annieXo

在我的情況下，使用材料設計glyphicons（.MDI），罪魁禍首是「顯示器：直列塊」。將顯示更改爲「內聯」解決了問題。

來源

2016-12-11 22:43:45

HTML固定標題不隱藏glyphicons

回答

相關問題