Question

I have a website and when the user logs in they can click on their username and a box under it will appear using jQuery. The problem is the box is positioned according to my browser, and I don’t know how to make it right.

The css code I am using to position it:

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

If you visit the site you will understand better, login with

website: codexvideos.com

Image how it looks when it’s correct:
https://i.stack.imgur.com/vOBiy.png

This is how it looks on smaller screens, resized screens, or other browsers.
https://i.stack.imgur.com/rmMh6.png

Please don’t post any comments or change the avatar etc.

Answer 1

An absolute position element is positioned relative to the first parent element that has a position other than static. So, add position: relative to your div#wrap declaration and adjust the left position of the drop element accordingly.