在浮動元素下方顯示絕對div

我在一個網站上工作 - 我的工作組合。在主頁上，我有一個圖像網格;每個圖像都是該項目頁面的鏈接。在浮動元素下方顯示絕對div

我現在的問題是鼠標懸停描述文本。當用戶將鼠標懸停在圖像下方時，我想要在圖像下方顯示簡短的說明。

我遇到的問題是我如何可以得到說明出現下方的形象直接。在原型中，我手動設置了bottom: -50px;，但需要針對不同數量的文本進行調整。我希望div的頂部自動與其圖像的底部對齊。我看到一些答案，說bottom: 0;會工作，但它不適合我。

圖片本身是float: left;而描述是position: absolute;;包含它們的div都是float: left;和position: relative;。

我會很樂意採取任何建議，讓這個工作。

來源

2014-09-20 baum

規格從W3C：

bottom指定多遠的箱的底部邊緣邊緣上方偏移框的包含塊的底部。

top屬性指定絕對定位的盒子的頂邊距邊緣偏離盒子包含塊的頂邊的距離。

代替bottom，使用top屬性具有值等於或大於100%更大。

Updated Demo

div.description { 
    /* other declarations... */ 
    position: absolute; 
    top: 110%; /* Anything >= 100% */ 
}

來源

2014-09-20 16:10:11

嗯，也許我應該閱讀規範...這很容易。 'top：100％'完全是我需要的。 – baum 2014-09-20 16:33:55

我想作以下調整到你的CSS規則：

div.description { 
    color: black; 
    background-color: white; 
    font-size: small; 

    padding: 5px; 
    border: 1px solid black; 
    border-radius: 0 0 5px 5px; 

    position: absolute; 
    top: 100%; /* set top to be bottom edge of parent block */ 
    margin-top: -5px; /* adjust as needed */ 
    z-index: 1; 

    visibility: hidden; 

}

Specity的top偏移到描述塊定位父塊的下邊緣以下，然後使用margin-top來控制空格（使用負邊距是如此需要）。

請注意，這與之前發佈的解決方案基本相同。

來源

2014-09-20 16:25:30

在浮動元素下方顯示絕對div

回答

相關問題