CSS-Positionierung geändert, wenn der Browser die Größe ändert oder auf kleineren Bildschirmen

Question

Ich habe eine Website und wenn der Benutzer sich anmeldet können sie auf ihren Benutzernamen klicken und eine Box darunter erscheint mit jQuery. Das Problem ist, dass die Box entsprechend meines Browsers positioniert ist, und ich weiß nicht, wie ich das richtig machen soll.

Der CSS-Code, den ich es bin mit positionieren:

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

Wenn Sie die Website besuchen Sie besser verstehen, melden Sie sich mit

Webseite: codexvideos.com

Bild, wie es aussieht Wenn es korrekt ist: http://i.stack.imgur.com/vOBiy.png

So sieht es auf kleineren Bildschirmen, skalierten Bildschirmen oder anderen Browsern aus. http://i.stack.imgur.com/rmMh6.png

Bitte schreiben Sie keine Kommentare oder der Avatar usw.

Answer 1

ein absoluten Position Element relativ zu dem ersten Mutterelement positioniert ist, dass eine andere Position als statisches aufweist. Fügen Sie also position: relative zu Ihrer div # -Wrap-Deklaration hinzu und passen Sie die linke Position des Drop-Elements entsprechend an.

Answer 2

Sie in einem Wrapper um das Menü positionieren müssen ändern und stellen Sie dann die css to left: 0px; top: 30px; < - abhängig von der Höhe des oberen Menüpunkt.

Answer 3

Sie müssen das übergeordnete div des absolut positionierten Elements auf position: relative setzen, dann basiert die absolute Positionierung auf diesem Element und nicht auf dem Hauptteil des Dokuments.

.user_bar { 
    position: relative; 
} 

und dann das absolute positioniertes Element zu so etwas wie:

left: 34px; 
top: 34px;