在jQuery函數之後重疊相對位置的對象

Question

所以我對這個例子進行了相當多的研究，但是我無法找到任何我正在嘗試做的事情。

我建立與具有一堆職位的頭版一個博客，以這樣的 -

http://prntscr.com/1vjoun

基於多少文字大小不等的博客是他們 -

http://prntscr.com/1vjozq

當您將鼠標懸停在博客上時，我正在嘗試在博客內部顯示一個小條，它與底部的文本重疊，以便我可以顯示一些選項，例如'Like''Favorite '‘功能’或W/E，這是我的問題的用武之地。

echo "<div class='blogpost' id='" . $row['blogid'] . "'>"; 
echo "<h3 class='blogheader'>" . $row['blogheader'] . "</h3>"; 
echo "<p class='blogbody'>" . $row['blogbody'] . "</p>"; 
echo "<div class='blogextras'></div>"; 
echo "</div>"; 

我創建‘blogextras’的div會舉辦上面提到的選項。

.blogextras { 
    position:relative; 
    height:35px; 
    width:100%; 
    background:#333; 
} 

我給它一些風格。

$(".blogpost").hover(function(){ 
$(".blogpost").css("overflow", "auto"); 
$(".blogextras").show(); 
$(".blogextras").css("position", "absolute"); 
}); 

    $(".blogpost").mouseleave(function(){ 
$(".blogpost").css("overflow", "hidden"); 
$(".blogextras").hide(); 
$(".blogextras").css("position", "relative"); 
    }); 

添加一些jQuery。

但我的最終結果使「blogextras」 DIV出現下面，我想這是（約35像素） -

http://prntscr.com/1vjppq

我也試着不改變其相對於絕對和這個位置確實給出了一種期望的結果，除了它使得我不希望它做的盒子重新變大。

我希望'blogextras'div每次都出現在可見文本區域的底部，而不管'blogpost'div的大小。

對不起，如果我還沒有足夠的分辨力，或者沒有給出足夠的代碼，只是發表評論，如果你想看到更多。

Answer 1

您的.blogpost容器需要相對位置，以便您可以將您的.blogextras欄精確定位在該容器內。你還需要給.blogextras酒吧更高z-index，使其重疊.blogpost內容：

.blogpost { 
    position:relative; 
    overflow:hidden; 
    /* Other CSS */ 
} 
.blogextras { 
    position:absolute; 
    z-index:10; 
    bottom:0; 
    left:0; 
    display:none; 
    height:35px; 
    width:100%; 
    background:#333; 
} 

$(".blogpost").hover(function(){ 
    $(".blogextras").fadeIn(); 
}); 

$(".blogpost").mouseleave(function(){ 
    $(".blogextras").fadeOut(); 
}); 

未經檢驗的，但應該給你〜你需要什麼。