Ich habe ein Popup-Fenster implementiert, das dynamisch Suchoptionen anzeigt. Ich möchte, dass die Box über dem gesamten Site-Inhalt "schwebt". Derzeit, wenn die Box angezeigt wird, verschiebt sie den gesamten Inhalt darunter und sieht schlecht aus.Float ein div über Seite Inhalt
Ich glaube, ich habe bereits versucht, den Z-Index der Box Div auf über dem Rest der Seite Inhalt setzen, aber immer noch kein Glück.
Sie möchten absolute positioning verwenden.
eine absolute Position Element positioniert relativ zu dem ersten Element Elternteil, der eine Position andere als statische aufweist. Wenn kein solches Element gefunden wird, der umschließende Block html ist
Zum Beispiel:
.yourDiv{
position:absolute;
top: 123px;
}
Um es zu arbeiten, muss die Eltern in Bezug auf seine (position:relative)
In Ihr Fall sollte dies tun:
.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}
Danke, absolute Positionierung hat mein Problem gelöst! –
@MrBoJangles hat die Antwort zur Verwendung Ihres Links aktualisiert. Die Antwort ist 4 Jahre alt, es war eine andere Zeit ^^ – marcgg
Paar Anmerkungen: Sie müssen eine obere und/oder linke Koordinate angeben, oder das scheint nicht zu funktionieren. Passen Sie auch auf, wenn Ihr div "auf dem Bildschirm" sein soll, dass Webseiten manchmal nicht immer "0,0" als aktuelle obere linke Seite zeigen (auch wenn es so aussieht), können Sie dies mit http: // stackoverflow überprüfen. com/q/3464876/32453.Möglicherweise müssen Sie auch einen Z-Index festlegen, wenn andere absolut positionierte Divs vorhanden sind. Auch wenn es eine "Vollbild" -Option gibt, wird Ihr "on top div" möglicherweise nicht angezeigt, wenn es kein untergeordnetes Element des "full screened" div ist. GL! – rogerdpack
Verwenden
position: absolute;
top: ...px;
left: ...px;
das div zu positionieren. Stellen Sie sicher, dass es kein übergeordnetes Tag mit der folgenden Position hat: relativ;
Mai müssen auch 'Z-Index' verwenden. –
Die Ergebnisse c ontainer div hat position: relative was bedeutet, dass es immer noch im Dokumentenfluss ist und das Layout der Elemente um es herum ändern wird. Sie müssen position: absolute verwenden, um einen "schwebenden" Effekt zu erzielen.
Sie sollten auch das Markup überprüfen Sie verwenden, Sie haben Phantom <li> s ohne Behälter <ul>, könnten Sie wahrscheinlich ersetzen sowohl die div#suggestions und div#autoSuggestionsList mit einem einzigen <ul> und das gewünschte Ergebnis erhalten.
geben z-index:-1 zu blinken und geben z-index:100 ..
Ja, desto höher ist der Z-Index, desto besser gesch. Dadurch wird Ihr Inhaltselement über jedem anderen Element auf der Seite positioniert. Angenommen, Sie haben einen Z-Index für einige Elemente auf Ihrer Seite. Suchen Sie nach dem höchsten Wert und geben Sie Ihrem Popup-Element dann einen höheren Z-Index. Auf diese Weise wird es sogar über die anderen Elemente mit Z-Index fließen. Wenn Sie keinen Z-Index in irgendeinem Element auf Ihrer Seite haben, sollten Sie wie Z-Index geben: 2; oder etwas Höheres.
Möglicherweise möchten Sie Google "Lightbox", um zu sehen, ob dieser Ansatz Ihnen den beabsichtigten Effekt gibt. – DOK
Die URL in der Frage gibt eine 404 –