Fließendes div-Element

position: absolute mit einem hoch genug z-index :

Dies ist eine Nachfolge von Tatus Antwort, die funktionieren wird, aber Z-Indizes auf eine ungeschickte, aber sehr gewöhnliche Weise verwendet.

Z-Index bestimmt die Stapelreihenfolge von positionierten Elementen relativ zu anderen positionierten Elementen. Die Stapelreihenfolge ist auch relativ zur Stapelreihenfolge der Elternelemente. Also:

Wenn Sie zwei gleichgeordnete Elemente auf einer Seite haben:

Diese sind beide nach ihrem Elternteil gestapelt - der body , der standardmäßig am 'unteren' Ende des Stapels liegt.

Wenn diese Elemente nun untergeordnete Objekte mit Z-Indizes haben, wird ihre Position im Stapel relativ zur Position ihrer Eltern bestimmt:

Ich finde es nützlich, wenn die Kinder einen "Punkt" -z-Index haben - also hat das Kind eines Elements mit z-index:1 einen Z-Index von 1.x . Auf diese Weise können Sie sehen, dass, selbst wenn ich diesem div einen Z-Index von 100000 gebe, es nie über einem Element mit dem Eltern-Z-Index von 2 erscheinen würde. 2.x erscheint immer oben auf 1.x

Dies ist nützlich, wenn Sie Dinge wie Overlays, Post-it-Notizen usw. "schweben" lassen. Ein Setup wie dieses ist ein guter Anfang:

Alles, was Sie an die Spitze legen möchten, wird in 'overlayContainer' übernommen - die Basis-Z-Indizes halten die beiden 'Ebenen' getrennt, und Sie können verwechselnd hohe Z-Indizes wie 999999 oder 100000 vermeiden.

Yup, du brauchst dein CSS, damit es so aussieht

Sie müssen es mit Positionierung und Z-Index tun;