Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Verhalten fixierter Elemente

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein fixiertes HTML-Element verhält sich ähnlich einem absolut positionierten Objekt. Der einzige Unterschied besteht im Verhalten während des Scrollens auf einer Website.

Transkript

Die feste Positionierung mit "position:fixed" verhält sich fast genau wie "position:absolute", mit dem kleinen, aber feinen Unterschied, dass ein fixiertes Element nicht mitscrollt. Ich werde Ihnen das hier gleich mal an dieser Seite zeigen. Im Moment ist hier noch nichts fixiert, auch wenn es hier drin steht, das ist nur ein bisschen Text. Im Editor sehen Sie die Datei "05-position-fixed.html" und hier ist im Moment noch nichts fixiert, das kommt aber gleich sofort. Es gibt im HTML ganz am Anfang im "body" ein "div" mit der Beschriftung "position:fixed", dann eine h1-Überschrift und sechs Absätze darunter, damit es [gleich] ein bisschen was zum Scrollen gibt. Dieses "div", das ist einzige "div" im gesamten Dokument, also reicht es zum Positionieren, wenn wir dazu reinschreiben, hier zu diesem "div": "position: fixed;". Das ist im Moment hier im Browser-- neu laden und Sie sehen, "position:fixed", da verändert sich alleine durch diese eine Anweisung schon eine ganze Menge. Es wird nicht mehr gesehen von den Umgebenden, die rutschen nach oben. Es schrumpft auf die Größe des Inhalts, es ist kein normales Block-Element mehr, es nimmt nicht mehr die gesamte Breite und hier diese Sache ist jetzt schon fixiert, weil ich kann mitscrollen und es bewegt sich überhaupt nicht mehr. Jetzt kann ich das natürlich noch ein bisschen genauer positionieren, dazu sage ich jetzt mal: "top: 50%;", speichere und gehe wieder rüber und Sie sehen, das bleibt jetzt hier bei 50% des Browserfensters stehen und ich kann hier die Seite scrollen und es bleibt. Es ist ein absolut positioniertes Element in der Spielart "fixed", fixiert, das heißt, absolut positioniert bedeutet, es sieht die anderen Elemente nicht mehr. Der Webdesigner ist dafür verantwortlich, der Autor dieser Webseite, der muss darauf achten, dass die Elemente sich nicht überlappen in irgendeiner Form. Fixierte Elemente, "position:fixed", bleiben immer an einer festen Position. Hier ist das bisschen CSS, ich kann hier noch eben links dazugeben: "left: 10px;". Um das genau zu definieren, lass ich immer eine Leerzeile und dann kann man hier sehr schön sehen: "position: fixed;", "top: 50%;", "left: 10px;", sieht im Browser so aus wie hier: 10 Pixel von links, 50% von oben und es bleibt fixiert stehen und scrollt nicht mit.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!