當瀏覽器調整大小或在較小的屏幕上時，CSS定位發生變化

Question

我有一個網站，當用戶登錄時，他們可以點擊他們的用戶名，下面的一個框就會使用jQuery顯示。問題是這個盒子是根據我的瀏覽器定位的，我不知道如何使它正確。

我使用的CSS代碼將它定位：

z-index: 9999; 
position: absolute; 
top: 100px; 
left: 116px; 

如果你訪問你會更好地瞭解網站，登錄與

網站：codexvideos.com

圖片它的外觀當它是正確的： http://i.stack.imgur.com/vOBiy.png

這是它在較小的屏幕，調整大小的屏幕或其他瀏覽器上的外觀。 http://i.stack.imgur.com/rmMh6.png

請不要發佈任何意見或更改頭像等

Answer 1

絕對位置元件相對於具有比靜態以外的位置的第一父元素定位。因此，將position: relative添加到您的div＃wrap聲明並相應地調整drop元素的左側位置。

Answer 2

需要位置的菜單的包裝內，然後設置css to left: 0px; top: 30px; < - 取決於頂部菜單項的高度。

Answer 3

您需要做的是將絕對定位元素的父div設置爲position：relative，那麼絕對定位將基於該元素而不是文檔的主體。

.user_bar { 
    position: relative; 
} 

然後設置絕對定位元件是這樣的：

left: 34px; 
top: 34px;