Wie positioniere ich ein Element über einem anderen Element?
Ich habe ein Menü und ein Suchfeld. Ich möchte das Suchfeld zusammen mit Menüpunkten einfügen. Aber mein Menü wird in einer anderen Datei in einem div namens "custommenu" erstellt, die die folgenden css verwendet:
%Vor%Während ich mein Suchfeld in einer separaten Datei habe, die wie folgt aussieht:
%Vor%Ich habe versucht, Folgendes zur CSS-Datei hinzuzufügen, so dass das Suchfeld über dem Menü erscheint, aber nicht funktioniert
%Vor%Das Suchfeld wird immer noch hinter dem Menü versteckt. Ich hätte gerne das Suchfeld im Menü. Wie mache ich das?
EDIT: Hier ist das CSS der Divs, die das Suchfeld enthält,
%Vor%Und so sieht es jetzt aus (lila Links - schneller Zugriff, weiße Box ist die Suche, die hinter dem rosa 'custommenu' Bereich geht. Ich hätte gerne die weiße Box auf der rosa Fläche. Und alle Dies ist innerhalb 'Kopfzeile')
4 Antworten
@all
Tut mir leid, dass ich sehr spät geantwortet habe. Aber ich fand die Lösung nach ein bisschen Fiedeln. Ich setze den Z-Index meiner Kopfzeile auf einen höheren Wert als mein Benutzermenü. Da meine Kopfzeile das Suchfeld enthält, musste sie einen höheren Wert haben, damit das Suchfeld über das Menü kommt.
Der Code sieht jetzt so aus
%Vor%Dies hat mein Suchfeld perfekt über mein Menü ausgerichtet. Nochmals vielen Dank für alle die geholfen haben. Schätze es.
Das Suchfeld, das hinter dem Menü erscheint, klingt wie ein Z-Index-Problem - vielleicht hat der Container des Menüs einen höheren Z-Index zum Suchfeld, versuchen Sie, den Suchfeld-Z-Index auf 999999 zu ändern.
z-index erfordert eine nicht-statische Positionierung. Aus Ihren Code-Beispielen ist jedoch nicht ersichtlich, welche Positionierungsart tatsächlich von den Elementen verwendet wird, die Sie mit z-index stapeln möchten.
Wie auch immer, hier ist ein sehr hilfreiches Werkzeug, das Ihnen helfen kann zu bestimmen, welche Art von Positionierung Sie für Ihre Elemente in Bezug auf ihre Beziehung verwenden müssen.