Elemente überlappen lassen

filament

Erfahrenes Mitglied
Hallo,

ich würde gern neben meinem Layout für ein Projekt noch eine oder zwei Alternative erstellen wollen.

Bin dabei bei der Ideenfindung über folgende beiden Dinge gestolpert.

https://www.google.de/imgres?imgurl...97UAhXLblAKHbwzACEQMwgvKAAwAA&iact=mrc&uact=8
und
https://www.google.de/imgres?imgurl...N7UAhXLYlAKHV21CiYQMwh3KEAwQA&iact=mrc&uact=8

Meine Frage an euch:
Wie bekomme ich diese Überlappung der Elemente am saubersten mit CSS hin? Oder sind das Grafiken? Mein erster Gedanke beim 1. Bild war einfach ein drei divs nebeneinander via Display Flex und ins mittlere ein Bild mit einem negativen Wert für margin.

Beim zweiten in der rechten oberen Ecke wo der Login ist, bin ich etwas planlos.

Anzumerken sei wohl noch, dass ich das Layout auch responsive haben möchte. Sprich sobald die width unter einen bestimmten Punkt geht, sollen die Elemente dann untereinander angeordnet werden. (Wie das grundsätzlich geht weiß ich, aber sind die beiden oben gezeigten Beispiele dann noch möglich? Wenn ja, wie?)

Danke und liebe Grüße
Ronny
 
Hi,
mit CSS kannst Du über den z-index Elemente in Ebenen anordnen.
Dazu müssen die Elemente aber relativ oder absolut positioniert werden.

Von einer grafische Lösung würd ich abraten wenn Du es responsive haben willst.
Obwohl ich glaube das die Beispiele eher mit Grafiken erzeugt wurden.

Grüße
 
Danke für Deine Antwort.

Ich will natürlich keine Grafiken nutzen, sind meiner Meinung überholt, da CSS soviele Möglichkeiten bietet. ;)

Ich wollte damit nur in Erfahrung bringen wie man so etwas erzielen kann. Das Problem solcher absoluten Positionierungen ist doch wahrscheinlich auch wieder, dass ich diese wohl kaum / schwer responsive gestalten kann oder?
 
Hi,
Eventuell musst Du das mit einem adaptiven Design mischen.
Aber funktionieren tut es. Hab schon oft z-Index bei responsive/adaptive Websites eingesetzt.

Grüße
 
Zurück