Ich habe ein eigenartiges Problem, von dem ich glaube, dass es viele andere Leute zuvor hatten, aber ich bin mir nicht sicher, ob es eine gute (reine CSS) Lösung dafür gibt ...
Ich habe ein Dokument mit folgender Struktur:
BOTTOM ist im Wesentlichen ein Hintergrundbild, das immer an der unteren rechten Ecke des Browserfensters verbleiben sollte . Ich möchte jedoch absolute positioning nicht relativ zum Hauptteil des Dokuments verwenden, da es dann unter dem Text fließt, der sich in MIDDLE befindet.
Im Grunde genommen möchte ich den gleichen Effekt wie den, den ich durch die absolute Positionierung erhalten würde, aber ich möchte nicht, dass Text oder andere Elemente darüber fließen. Es sollte sich so verhalten, als ob es keine bestimmte Positionierung hätte, mit der Breite 100% und der Höhe 200px, aber immer in der unteren rechten Seite des Dokuments .
Ich werde froh sein, irgendwelche Fragen zu diesem Problem zu beantworten, wie Sie sicher nicht verstehen werden. ;)
Dies funktioniert sowohl mit kurzen mittleren Inhalten wie gezeigt, als auch mit ausführlichen mittleren Inhalten wie: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididant ut labore et dolore magna aliqua. En en en ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt molli anim id est laborum. Lorem ipsum dolor sit amét, consectetur adipisicing elit, sed do eiusmod temporé incididunt ut labore et dolor magna aliqua. En en en ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt molli anim id est laborum.
Es gibt ein Problem, bei dem, wenn die Seitenhöhe höher als 3 * 200px + middleContentHeight ist, eine weiße Lücke zwischen den grünen und blauen Blöcken angezeigt wird. Dies kann leicht durch Deklarieren einer Hintergrundfarbe für Körper behoben werden.
Dies ist ein sehr häufiges Problem. Lösung: Position: fixiert. Das macht, was du gesagt hast, stellt sicher, dass der Gegenstand IMMER in einer bestimmten Position erscheint. Verwenden Sie
%Vor%Also wird das immer rechts unten erscheinen. idk, wenn Sie dies mit einem Hintergrundbild tun können, aber das entspricht Ihren Anforderungen. es ist nicht in IE 6 unterstützt (aber dann wieder, was ist?). Ein Beispiel finden Sie hier . Scrollen Sie auf der Seite nach oben und unten. Beachten Sie, wie sich das Bild immer im unteren Bereich des Browserfensters befindet. Stellen Sie außerdem sicher, dass Ihr Z-Index ausreichend groß ist, wenn Sie nicht möchten, dass Dinge darüber fließen. : D
Um der Antwort von @stevedbrown hinzuzufügen:
%Vor%wo 2, ist nur ein höherer Z-Index als die anderen Seitenelemente
Ich habe gerade mit dem Einbetten des Bildes in den Text herumgespielt.
Genauer gesagt, ich benutzte den CKEditor und zog das Bild einfach dahin, wo ich es haben wollte. Dann schaute ich auf die Quelle, um zu finden, dass das Bild-Tag einfach an eine scheinbar willkürliche Stelle innerhalb des div-Elements bewegt wurde.
%Vor%Mir ist klar, dass dies nicht mathematisch präzise ist. Aber hoffentlich bietet diese Lösung zumindest eine andere Perspektive für die anderen Antworten (die ich nicht für mich arbeiten lassen konnte). Es scheint nichts in CSS zu geben, das ein Element nach "unten, rechts" eines Para verschiebt, während der Text umgebrochen wird.