浏览器调整大小或在较小的屏幕上更改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

您需要将菜单放在包装中，然后设置css to left: 0px; top: 30px;＆lt; - 取决于顶部菜单项的高度。

Answer 2

您需要做的是将绝对定位元素的父div设置为position：relative，然后绝对定位将基于该元素而不是文档正文。

.user_bar { 
     position: relative;
}

然后将绝对定位元素设置为：

left: 34px;
top: 34px;

Answer 3

绝对位置元素相对于具有静态位置的第一个父元素定位。因此，将position: relative添加到div＃wrap声明中并相应地调整drop元素的左侧位置。