Absolute Positionierung!

[stobi_de]

Hier mal was Wissenswertes, was mir bis gerade neu war.
Wenn ich irgendwas absolut positioniere, so ist die Referenz der umgebende Container, darauf bezieht sich die absolute Position.
Ist aber irgendwie eine dumme Sache, wenn durch responsives Umstrukturieren Spalten zu Zeilen werden und das absolut positionierte Dingsbums dann an falscher Stelle steht.

Will ich z.B., dass ein absolutes Teil immer über einem Bild liegt, auch nach responsiver Umstellung, so kann man dem Imagewrapper (den es in Mobi fast immer gibt) die zu Klasse CONTAINER zusätzlich geben. Dann bezieht sich die Position immer auf das Bild.

Schlecht zu erklären, habe aber recht lange dran gesucht.
Also hier ein Beispiel:
https://kaiser-koenig-umzug.de/
Die Google-Bewertung soll immer über dem Bild der beiden Jungs mit Karton sein.
Bewertung und die Jungs sind in einem Container, und die Anordnung bleibt auch nach Spalten->Zeilen auf dem Handy bestehen.
Vorher war die Google-Bewertung über dem Fuß-Button, weil halt absolut in Bezug auf den Gesamtcontainer der Section positioniert.

Tommy: findest Du einfachere Worte?

[Tommy Herrmann]

... Du bist aber heute Morgen ganz schön kompliziert

Ich weiß noch nicht einmal was da die "Google Bewertung" sein soll

Das hier - was da "einfliegt"?:

Vielleicht kannst Du das über eine ähnliche CSS wie bei dem responsiven Hotspot schaffen?!

https://www.mobirise-tutorials.com/Lawy ... tspot.html

[stobi_de]

Hm... nun wollte was Allgemeinbildung teilen, aber keiner versteht mich
Nee, das mit dem Hotspot ist was ganz anderes.

Und ja, der Google ist das einfliegende Fenster.

Wenn Du jetzt das Fenster schmaler machst, wandern die beiden Jungs nach oben.
Aber das Google-Dings bleibt im Bild von den Jungs, was normalerweise nicht der Fall ist.

[Tommy Herrmann]

... ja also dieses einfliegende Fensterchen mit dem Google-Bildchen hat ja seine eigene CSS und JS, da ich das nicht kenne, kann ich dazu auch nichts sagen.

Code: Alles auswählen

<!--WOW-Animation-->
<link rel="stylesheet" href="WOW-master/css/libs/animate.css">
<script src="WOW-master/dist/wow.min.js"></script>
<script>
new WOW().init();
</script>

Info:

Du hast jetzt wieder bei dieser Umzugs-Firma Webseite einen schmalen Querscroller auf der Startseite am Handy und der riesen Querscroller auf der mehrseitigen Formularseite "Umzugsplaner" ist auch wieder zurück am Handy, sodass sogar die Hamburger-Navi völlig weg ist.