Dazu solltest du dir erst einmal die Grundlagen zu CSS und JS anschauen. Insbesonder das Thema z-indes bei css und trigger bei JS.
Denn du sollst ja auch was lernen und nicht alles von anderen machen lassen :D.
Bin jetzt ehh erst mal AFK schaue aber spätestens morgen Abend wieder rein.
vielleicht kannst mir ja morgen abends dabei helfen 
Danke für deine Hilfe heute 
Erst einmal zum verschieben: Der unsichtbare Bereich (bleiben wir mal bei diesem Namen) geht ca. bis zum aktuell untersten Punkt des Suchfelds (42px von oben).
Ansonsten hast du dich mal etwas über die von mit genannten Themen informiert?
Nein, denn der z-index des Login Panels (inkl. unsichtbaren Bereich) liegt bei 999. Denn solltest du erst einmal etwas herabsetzen und dann kannst du den der search Bar x +1 setzen. (x=index des Login Panels)
Auch wenn du den Bereich etwas größer gemacht hast funktioniert es gerade bei mir.
Jetzt musst du es noch so anpassen, dass die Ebene mit der Search Bar beim einblenden des Logins ausgeblendet oder in der Ebene verschoben wird.
Dazu am besten auch mal eine Lösung suchen. Sollten Probleme auftreten helfen wir dir natürlich gerne.
Ja, da musst du wie gesagt noch mit js (javascript) ran. Entweder änderst du beim ausklappen Login die Ebene oder lässt einfach den entsprechenden Container ausblenden.
Damit änderst du in js die Ebene:
document.getElementById("ID").style.zIndex="100";
