当浏览器调整大小或在较小的屏幕上时，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;