關於懸停顯示div，從主div底部的位置

Question

我試圖用CSS來顯示另一個div到我的主div，但是從主div的底部定位，而不是像我用我的代碼一樣進行測試。

HTML

<div id="main"> 
    <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a> 
    <div id="hidden"> 
     <h2><a href="">Link1</h2> 
     <h2><a href="">Link2</h2> 
    </div> 
</div> 

CSS

#main { 
width: 540px; 
border: 1px solid #eee; 
text-align:center; 
} 

#hidden { 
display:none; 
border: 4px solid #eee; 
} 

#main:hover > #hidden { 
display:block; 
} 

我喜歡的是有像下圖： http://i.stack.imgur.com/Q41JG.png

Answer 1

試試這個：

#main { 
    width: 540px; 
    border: 1px solid #eee; 
    text-align:center; 
    position: relative; 
} 
#hidden { 
    display:none; 
    border: 4px solid #eee; 
    position: absolute; 
    bottom: 0px; 
    background: white; 
    width: 100%; 
} 
#main:hover > #hidden { 
    display:block; 
} 

Demo.

說明：
首先我做了相對於身體的#main div的位置，然後我做了定位，這個#main的孩子，#hidden，絕對的位置將移動#hidden與#main爲#hidden的父母現在與文檔主體相對定位，是的，我將底部邊距更改爲0，以便它可以堅持到#main div的底部。

Answer 2

你想要的是這需要更多的代碼！

它需要位置屬性代碼！通過使用它，您可以將元素放置在另一個元素上。因爲否則它是不可能的！

這裏現在是小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/R89A8/

我改變了CSS這樣：

#main { 
width: 540px; 
border: 1px solid #eee; 
text-align:center; 
    position: relative; 
} 

#hidden { 
display:none; 
border: 4px solid #eee; 
} 

#main:hover > #hidden { 
    position: absolute; 
    display: block; 
    bottom: 0px; 
} 

你可以看到，我剛纔說position: value和bottom: value屬性代碼。

第二件事，在HTML是：

<div id="main"> 
    <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a> 
    <div id="hidden"> 
     <h2><a href="">Link1</a></h2> 
     <h2><a href="">Link2</a></h2> 
    </div> 
</div> 

請注意，您必須關閉每個打開的標記，使您的HTML有效的HTML！

對不起，我沒有給出框的寬度和高度值，你可以自己設置！

更多：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 3

寫：

#hidden { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    background:white; 
} 

Updated fiddle here.