Позиционирование 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

Что вам нужно сделать, это установить для родительского div элемента с абсолютным позиционированием значение position: относительное, тогда абсолютное позиционирование будет основываться на этом элементе, а не на теле документа.

.user_bar { 
     position: relative;
}

А затем установите элемент с абсолютным позиционированием на что-то вроде:

left: 34px;
top: 34px;

Answer 2

Элемент абсолютной позиции располагается относительно первого родительского элемента, который имеет позицию, отличную от статической.Итак, добавьте position: relative в объявление div # wrap и соответственно отрегулируйте левое положение элемента drop.

Answer 3

вам нужно расположить меню внутри оболочки, а затем установить css to left: 0px; top: 30px; <- в зависимости от высоты верхнего пункта меню. </p>