2011-10-27 32 views
0

在我的網頁中,我有一個div用於標題。我如何將一個孩子div放在父div的固定位置上,當我更改父母的位置時,孩子應該自動移動?

<div id="top-bar"> 
     <div id="headbar"> 
      <img src="images/headbar.jpg" border="0" alt=""> 
     <div id="loginbtn"><img src="images/loginbtn.png" border="0" alt=""></div> 
     </div> 
</div> 

的CSS這是繼:

body 
{ 
margin:0; 
padding:0 
} 

    # headbar 
{ 
background:#A4DF00; 
width: 1019px; 
height: 185px; 
text-align:center; 
margin:0 auto; 
} 

# top-bar 
{ 
background:#AFDF04; 
height: 187px; 
} 

# loginbtn 
{ 
width: 160px; 
hight: 69px; 
position: absolute; 
top: 20px; 
left: 830px; 
} 

我想我的頭在中間,當用戶增加了探險家大小。這工作正常。使用這個CSS登錄按鈕的地方是固定的。我想要在頭部div中的按鈕的固定位置登錄。當用戶增加資源管理器的大小和標題保持居中時,登錄按鈕也應該在標題div中保持正確的位置。我怎樣才能做到這一點?提前致謝。

回答

2

地址:

#headbar { 
    position:relative; 
} 
+0

這是正確的! 'position:absolute;'指下一個具有'position:relative;'的父元素。 – drublic

+0

無論如何,只要加上,你可以使用右鍵:而不是左鍵:,這是可選的,但我想你會更容易指定從右邊緣的差距。 – Godzilla

1

您已經位於登錄按鈕「絕對」,而你希望它是相對於標題欄(即絕對定位相對的標題欄)。此外,看起來您的登錄按鈕位於標題欄的右側,判斷其大小和位置。所以你還不如刪除position: absolute和應用

float: right; 

和一些餘量,說

margin-top: 20px; 
margin-right: 20px; 

得到它固定在你想要的地方。

相關問題