How do I position a div on top of another div

Question

The post on my website are set to show information regarding the post when the mouse hovers over it.

Currently when I hover over a post the information shows to the right, and I would like it to show on top of the post. I want to be able to margin the information to show ontop of the post in the center but nothing I input is working. After everything I tried didn't work I went back and set them to blank and that still didn't work. You can see a live version at http://fallbackryleighamor.tumblr.com/

This is the current css. Any idea how I can edit it to make it work?

#info #date{ color:#000; border: 2px #000 solid;
text-transform: uppercase; letter-spacing: 2px; font: 10px Consolas;}

#info a{ color: #000;}

#date a { width: 280px; color: #000;}

#posts{ position:;}

#date #info{position:;} #date #info{float:;} 

 {background: rgba(0, 0, 9, 0.1); float:left; width: auto; height: auto;
margin-top: ;}

#textpost #photopost #photosetpost #quotepost #quotelink #audiopost 

#videopost{background: rgba(0, 0, 9, 0.1); float:left; width: auto;
height: auto; margin-top: ;}

#date { display:none;}

 #posts:hover #date {display:block;}

 #textpost:hover #photopost:hover #photosetpost:hover #quotepost:hover #quotelink:hover 
 #audiopost:hover    #videopost:hover{display:block;}


   #date #info{
        margin-top:0px;
        margin-bottom:0px;
        margin-right:0px;
        margin-left:0px;
    }

       #date #info{
        padding-top:0px;
        padding-bottom:0px;
        padding-right:0px;
        padding-left:0px;
    } 

    #date #info{
        z-index:;}

html

       <div id="date">
        {block:Date}
<a href="{Permalink}"> {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, {TimeAgo}</a>{/block:Date}

        {block:NoteCount}
        <a href="{Permalink}">{NoteCountWithLabel}</a>
        {/block:NoteCount}


    <div id="info">{block:RebloggedFrom} 
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
   {ReblogParentName} 
</a>
        origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}<a/>{/block:RebloggedFrom}

    </div></div>

UPDATED WITH SOLUTION.

CSS

 #date{
 position:relative;
   left:-430px;
    top:95px;
    z-index:1;
       }

      #info{
    position:relative;
    left:-420px;
 top:190px;
 z-index:1;
    }

  #controls { display:none;}

  #posts:hover #controls {display:block;}

HTML

       <div id="controls"><div id="date">
        {block:Date}
<a href="{Permalink}"> {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, {TimeAgo}</a>{/block:Date}

        {block:NoteCount}
        <a href="{Permalink}">{NoteCountWithLabel}</a>
        {/block:NoteCount}
                </div>
                <br>
    <div id="info">{block:RebloggedFrom} 
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
   {ReblogParentName} 
</a>
        origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}<a/>{/block:RebloggedFrom}

                </div></div>

AWESOME STUFF! I want to thank everyone who commented and helped me through this frustration. I hope my solution to this helps someone else.

Answer 1

set post z-index to

#posts{
 z-index:1;
}

and info like

 #date #info{
    position: absolute;

    z-index: 2;
} 

or set z-index any value greater than 1. hope it helps......

Answer 2

You can try using with style z-index:1; and position: absolute;

Something like this:-

#date #info{
        position: absolute;
        margin-top:0px;
        margin-bottom:0px;
        margin-right:0px;
        margin-left:0px;
        z-index: 0;
    }

       #date #info{
        position: relative;
        padding-top:0px;
        padding-bottom:0px;
        padding-right:0px;
        padding-left:0px;
        z-index: 1;
    } 

    #date #info{
        z-index:;}