Search code examples
jqueryhtmlcsspositioning

CSS positioning changed when browser resizes or on smaller screens

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.sstatic.net/vOBiy.png

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

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

Solution

  • 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.