如何在另一個div上定位div

我的網站上的帖子設置爲顯示鼠標懸停在其上的帖子的相關信息。如何在另一個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>

真棒的東西！我想感謝所有評論並幫助我度過這次挫折的人。我希望我的解決方案能夠幫助別人。

來源

2013-08-31 Brittany Tobar

信息像日期和時間像' Saturday Aug 31, 2013, 1 hour ago'？ –

我假設你的意思是添加html，所以我添加了我認爲最相關的東西。請讓我知道是否需要更多。感謝您的答覆。輸入是需要的。 –

我試圖得到它：https://dl.dropboxusercontent.com/u/96798895/kjgjhg.png，這是你需要什麼？ –

你可以嘗試風格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:;}

來源

2013-08-31 06:42:44

我更新了你的建議，我仍然沒有得到任何動作。 #date #info {position：absolute; z-index：1;}有沒有關於我的代碼的其他信息，我可以發佈這將有助於每個人更好地理解我的問題？感謝您的答覆。 –

這不是發芽！ –

集後的z-index到

#posts{ 
z-index:1; 
}

和信息像

#date #info{ 
    position: absolute; 

    z-index: 2; 
}

或設置z-index任何大於1的值。希望它有幫助......

來源

2013-08-31 07:01:15 abc123

這似乎也沒有工作。當我將它們設置爲-1時，所有消失的數字都會改變。所以這可能不起作用。 –

如何在另一個div上定位div

回答

相關問題