css - 如何将一个 div 放在另一个 div 之上

Question

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

目前，当我将鼠标悬停在帖子上时，信息会显示在右侧，我希望它显示在帖子的顶部。我希望能够将信息边缘化以显示在中心帖子的顶部，但我输入的任何内容都不起作用。在我尝试的所有方法都不起作用之后，我回去将它们设置为空白，但仍然不起作用。您可以在 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>

很棒的东西!我要感谢所有发表评论并帮助我度过这次挫折的人。我希望我的解决方案可以帮助其他人。

Answer 1

您可以尝试使用 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:;}