Overlapping relatively positioned objects after a jQuery function

Question

So I've looked around quite a bit for an example to this but I couldn't find anything for what exactly I am trying to do.

I'm building a blog with the front page having a bunch of posts in order like this -

http://prntscr.com/1vjoun

The blogs vary in size based on how much text is in them -

http://prntscr.com/1vjozq

When you hover over a blog I am trying to make a small bar appear inside of the blog that overlaps the text at the bottom so that I can have some options appear, such as 'Like' 'Favorite' 'Feature' or w/e and this is where my problem comes in.

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>";

I create the 'blogextras' div that will hold the options mentioned above.

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

I give it some style.

    $(".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");
  });

Add some jQuery.

But my final result makes the 'blogextras' div appear below where I want it to be (about 35 pixels) -

http://prntscr.com/1vjppq

I also tried not changing it's position from relative to absolute and this does give a kind of desired result except it makes the boxes re-size which I don't want it to do.

I want the 'blogextras' div to appear at the bottom of the visible text area every time no matter the size of the 'blogpost' div.

Sorry if I haven't been discriptive enough or haven't given enough code just post a comment if you want to see more.

Answer 1

Your .blogpost container needs a relative position so that you can position your .blogextras bar exactly within that container. You also need to give the .blogextras bar a higher z-index so that it overlaps the .blogpost content:

.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();
});

Untested, but that should give you ~ what you need.