css - 如何将div放置在另一个div的顶部

我的网站上的帖子设置为当鼠标悬停在该帖子上时显示有关该帖子的信息。

目前，当我将鼠标悬停在帖子上时，信息会显示在右侧，并且我希望它显示在帖子的顶部。我希望能够将信息的边距显示在中心的帖子顶部，但我输入的内容无效。
我尝试的所有方法都无效后，我回过头将其设置为空白，但仍然无效。您可以在http://fallbackryleighamor.tumblr.com/上看到实时版本

这是当前的CSS。知道如何编辑才能使其正常工作吗？

#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>

解决方案已更新。

的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>

真棒的东西！我要感谢所有评论并帮助我度过了挫败感的人。我希望我的解决方案可以帮助其他人。

最佳答案

您可以尝试使用样式z-index:1;和position: absolute;

像这样的东西：

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