How do I position a div on top of another div

How do I position a div on top of another div



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:;}