Webkrauts » Positionierung mit CSS

Artikel

Positionierung mit CSS

Positionierungsarten

Es gibt verschiedene Arten der Positionierung. Wird keine Positionierungsangabe mitgegeben, so werden die Elemente einfach in ihrem natürlichen Fluß positioniert (was der Angabe position:static entspräche). Inline-Elemente (z. B. a, img, span) legen sich dabei nebeneinander, Blockelemente (z. B. h_x, p, div) dagegen untereinander. Möchte man ein anderes Verhalten, so kann display helfen.

Relative Positionierung

Mit position:relativekann das Element aus seinem natürlichen Fluß heraus verschoben werden. Dabei verschieben sich die umgebenden Elemente nicht mit – Überlappungen sind also möglich.
Außerdem kann ein relativ positioniertes Element auch als Elternelement für absolut positionierte dienen. Gelegentlich braucht man diese Positionierungsart auch, um Browserbugs zu reparieren – speziell dem Internet Explorer hilft es oft, Elemente wie gewünscht am Platz zu halten.

Absolute Positionierung

Durch position:absolute kann man Elemente genau an bestimmte Stellen positionieren – was auf der einen Seite verlockend erscheint, vor allem für diejenigen, die gerne ein pixelgenaues Layout wollen. Auf der anderen Seite sind absolut positionierte Layouts aber extrem unflexibel, da die Elemente keinerlei Rücksicht aufeinander nehmen – sie legen sich im Zweifelsfalle einfach übereinander und verdecken den Inhalt. Insbesondere bei Schriftvergrößerungen oder anderen Viewportgrößen gibt es oft Probleme.

Fixe Position

Mit position:fixed können Elemente auf der Seite fixiert werden – auch beim Scrollen bleibt ein so positioniertes Element zum Beispiel immer in einer bestimmten Ecke. Leider können noch nicht alle Browser diese Positionierung (genauer: der Internet Explorer kann es nicht) – außerdem muß man natürlich auch hier wieder die mögliche Überlappung und Verdeckung anderer Inhalte beachten.

Das Floaten

Doch damit nicht genug – CSS kann noch mehr!

Man braucht nicht immer positionieren, Elemente können auch einfach per float nach rechts oder links verschoben werden. Der Inhalt bleibt dabei immer sichtbar und wird nur verschoben.
Mit Floats bleibt man also sehr flexibel in der Gestaltung.
Allerdings soll auch nicht verschwiegen werden, dass es leider einige Browserprobleme gerade bei der Verwendung von float gibt, die einem das Leben manchmal schwer machen können.

Zusammenfassend läßt sich sagen, dass CSS viele Möglichkeiten an die Hand gibt, eine Webseite ansprechend zu gestalten. Tabellen als Fachwerkkrücke sind daher heute nicht mehr notwendig. Trotzdem braucht es etwas Erfahrung, weil die doch recht unterschiedlichen Browserinterpretationen nicht immer einfach zu beherrschen sind.

Weiterführende Links:

Zur Autorin:

Teresia Kuhr ist Ärztin an einer Neurologischen Rehabilitationsklinik und beschäftigt sich in ihrer Freizeit mit standardkonformen und barrierefreiem Webdesign. Ein Projekt ist CSS4you.

Info:: Positionierung mit CSS ist Beitrag Nr. 27
Autor:: Teresia Kuhr am 15. Dezember 2005 um 22:00
Kategorie:: Adventskalender 2005

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

So richtig hilfreich finde ich den Artikel ehrlich gesagt nicht. Immer wenns interessant wird bricht er ab, konkretes sucht man vergebens. Kurz zsammengefasst sagt er uns doch nur: Absolute, fixe und float-Positionierung kann der IE sowieso nicht, relative Positionierung hilft zwar, "Elemente wie gewünscht am Platz zu halten" und "Browserbugs zu reparieren". Aber wie das geht verrät man uns nicht. Irgendwie bin ich jetzt nicht viel schlauer als vorher.

Kommentar by Matthias - 15. Dezember 2005 um 12:13
2.

Ich muß mich hier Matthias anschließen. Der Beitrag kratzt leider nur an der Oberfläche. Eine intensive Auseindandersetzung mit CSS-Positionierung würde hier aber sicherlich den Rahmen sprengen.

Kommentar by joko13 - 15. Dezember 2005 um 14:25
3.

Ihr wollt tiefere Informationen?

Dann arbeitet ein mal durch die Links die Teresia aufgeführt hat.
Hier noch ein kleines Tutorial:

http://www.webwriting-magazin.de/sogehts/csstutorial/tut1.html

Kommentar by ulle - 15. Dezember 2005 um 15:57
4.

Natürlich kann man in so einem Artikel nicht alles erschöpfend behandeln. Was ich meine wird wohl am ehesten deutlich, wenn man sich als Vergleich mal die exzellenten Artikel 10, 11, 12 oder auch 16 ansieht.. nach jeder Artikellektüre bin ich (als CSS-Anfänger) sofort losgerannt und habe mein eigenes Set von Stylesheets optimiert. Nach diesem hier habe ich nur ratlos auf meinen Code gestarrt und überlegt, was mit die Autorin eigentlich sagen wollte..

Kommentar by Matthias - 16. Dezember 2005 um 11:06
5.

"nach jeder Artikellektüre bin ich (als CSS-Anfänger) sofort losgerannt und habe mein eigenes Set von Stylesheets optimiert. "

Was ist daran optimal, wenn man einfach stur macht, was andere vorbeten?
Darum sollte es imo gar nicht gehen. Ich finde es gut, sich Denkanstöße zu holen, dann loszusurfen und weiter zu recherchieren – auch ruhig mal nach abweichenden Meinungen und Vorgehensweisen zu forschen. Und dann anfangen, über das nachzudenken, was man aufgenommen hat, Fragen stellen, Zweifeln, Vor- und Nachteile verschiedener Methoden abzuwägen, sich eine eigene Meinung zu bilden. Dabei kommen einem sogar manchmal ganz neue Ideen oder Variationen und Kombinationen dessen in den Sinn, was man aufgenommen hat. SO funktioniert imo moderne Webentwicklung. Dabei entwickelt man nicht nur Webseiten, sondern nebenbei auch sein Verständnis vom Web als lebendiges Medium. Das ist kein Patentrezept, das man sich einfach mal so verschreiben lässt und in Nullkommanix ist alles perfekt. Es ist zunächst ein Prozess des Lernens, dann einer des Experimentierens und dann einer des allmählichen Fortschritts. Und am Ende dieses Prozesses stehst Du wieder am Anfang, denn er ist eine Endlosschleife. ;o).

Man kann den Weg, den ich hier beschrieb, aber auch einfacher formulieren – mit den Worten von Stefan Münz: Es geht dabei um 'die Energie des Verstehens'. Und die braucht nun mal auch Zeit, Geduld und Eigeninitiative. Und den 'goldenen Weg', den gibt's imo sowieso nicht. Es gibt viele Wege zum Ziel und ich finde das auch gut so. ;o)

Kommentar by Iris - 16. Dezember 2005 um 12:46
6.

Eine wichtige Positionierungsmethode wurde hier (wie so oft) aber vergessen: margin und padding.

Auch damit kann man Elemente wunderbar ausrichten und dennoch die Beeinflussung der Elemente untereinander intakt halten.

Kommentar by Mathias Brodala - 18. Dezember 2005 um 13:50
7.

"nach jeder Artikellektüre bin ich (als CSS-Anfänger) sofort losgerannt und habe mein eigenes Set von Stylesheets optimiert."
inwiefern ist diesem Satz zu entnehmen, dass ich stur irgendetwas vorgebetetes nachgemacht habe? Das war es nicht was ich damit sagen wollte. Ich habe jedoch aus den erwähnten Artikeln Erkenntnisse gewonnen, die ich sofort einsetzen konnte (natürlich an meine Bedürfnisse angepasst – das hatte ich eigentlich als selbstverständlich betrachtet und habe es deswegen nicht extra nocheinmal aufgeführt). Aus diesem Artikel hier nicht. Ein einfacher Vergleich: dies ist der einzige Artikel in dem es kein einziges Codebeispiel gibt. (abgesehen von Nr 17) Was nützt mir eine Aussage wie "Möchte man ein anderes Verhalten, so kann display helfen." wenn nochnichtmal gesagt wird, ob display nun eine Eigenschaft (mit welchen zulässigen Werten?) oder ein Wert (von welcher Eigeschaft?) ist. Sicher kann man das in den Links oder bei SelfHTML nachlesen, aber wozu brauche ich dann den Artikel? Dann hätte die Linkliste gereicht.

Kommentar by Matthias - 18. Dezember 2005 um 18:45
8.

@Mathias: margin und padding sind keine Positionierungsmethode, sondern der Aussen- und der Innenabstand eines Objektes. Man nutzt diese allerdings beispielsweise bei der statischen oder relativen Positionierung, um das Objekt vom Nachbarobjekt zu verschieben.

Kommentar by Jens Grochtdreis - 21. Dezember 2005 um 11:55
9.

Bzw. um das Element an Hand seines Elternelementes ausrichten, richtig.
Warum sollte man margin und padding nicht bei Positionierungsmethoden aufzählen? Durch Beeinflussung der Abstände werden Elemente schließlich auch ausgerichtet. (Sofern sie für die jeweilige Eigenschaft empfänglich sind.)

Kommentar by Mathias Brodala - 21. Dezember 2005 um 15:22
10.

Es ist wohl kaum möglich, bei einem derart komplexen Thema den Spagat zwischen adventskalendergerechter Artikellänge und angemessener Tiefe der Informationen hinzubekommen.
Hier sind es wohl eindeutig zu viele Themenbereiche geworden, sodaß (wie schon oben erwähnt) an den wirklich spannenden Stellen das nächste Fass aufgemacht wird. Ich vermissse z. B.
die Information, dass absolut positionierte Elemente ihre Position am nächsten positionierten Elternelement ausrichten. Die beschriebenen Probleme mit Schriftgrößen- und Viewportveränderungen kann man damit zu großen Teilen umgehen.

Kommentar by Eckhard Rotte - 24. Dezember 2005 um 01:43
11.

@mathias: Du magst es sprachlich drehen und wenden, wie Du es möchtest. Weder in der Praxis, noch in der Theorie des W3C haben margin und padding etwas mit Positionierung zu tun. Sie sind Teil des Boxmodells. Für Deine Augen ist der Effekt identisch, ob ich eine Box per absoluter Positionierung 30 Pixel von links platziere oder ob ich dem linken Außenabstand 30 Pixel zuweise. Für die Box und für die Seite macht dies schon einen Unterschied.

Kommentar by Jens Grochtdreis - 2. Januar 2006 um 23:09
12.

ich würde padding und margin nicht zu den positionierungseigenschaften zählen. sie sind ganz einfach dazu gedacht, elemente auszurichten, also das geographische verhältnis zu ihrem elternelement zu verändern, wohingegen positionierung vielmehr die geogrpahische lage eines elements innerhalb des dokuments beeinflusst.

Kommentar by ayrton89 - 7. Januar 2007 um 14:10

Webkrauts: Für mehr Qualität im Web.