如何清除不透明粘貼的div高度？

使用Bootstrap和一些社交媒體圖標（位於here）的自定義CSS，我創建了一個筆來演示（並測試）我的代碼。目標是創建可自動適合父級div（水平或垂直等）的圖標，並且除了一個小問題外，我都可以開展工作。我貼了兩個div（一個水平，一個垂直），並且在詞綴被觸發前100％不透明。然而，我知道爲什麼，該視圖仍然呈現與文檔的頂部和頁面標題之間基本看起來像一個巨大的邊緣。我怎樣才能清除這個，而仍然使用display:inline-block？如何清除不透明粘貼的div高度？

下面是相關的div &類的CSS，但我建議你檢查出pen首先是因爲視覺上看到它expalins問題要好得多：

.snav { 
    top:50%; 
    margin-left:-15px; 
    background: rgb(0, 0, 0); 
    width:5rem; 
    height:25rem; 
    display:inline-block; 
    z-index:99; 
    transition: 1s all ease-in; 
    transform: translate(0, -50%); 
    opacity:0; 
} 


.horiz{ 
    top:0; 
    margin-left: auto; 
    margin-right:auto; 
    z-index:99; 
    left:50%; 
    transition: 1s all ease; 
    transform: translate(-50%, 0); 
    opacity:0; 
    display:inline-block; 
} 

#horiz{ 
    background: rgb(0,0,0); 
    width:26.6rem; 
    height:5rem; 
} 

.affix{ 
    opacity:.5; 
} 

.affix:hover{ 
    opacity:.9; 
}

來源

2015-10-07 h3xc0ntr0l

這將是更好的擴大「我知道爲什麼」的聲明 - 現在不可能評分答案，因爲他們可能只是重複你知道的*。 –

的頂部之間的差距頁面和標題是因爲社交圖標小部件仍在內容流中。

嘗試將position: fixed;添加到.snav樣式規則中，以將其從內容流中移出並且標題將轉到預期位置。

來源

2015-10-07 16:53:31 Ryan

如何清除不透明粘貼的div高度？

回答

相關問題