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

Answer 2

将z-index设置为

#posts{
 z-index:1;
}

和

之类的信息

 #date #info{
    position: absolute;

    z-index: 2;
}

或将z-index设置为大于1的任何值。希望它有所帮助......

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

2 个答案: