Positionierung
Dr. B.
- css
0 at0 Tobias Müller0 Dr. B.
0 MudGuard0 erika0 Ingo Turski0 erika
0 MudGuard0 erika
Hallo allerseits!
Ich möchte einen <div>-Container unterhalb eines anderen <div>-Containers verankern. Nun habe ich folgende Konstruktion, welche nicht zum gewünschten Ergebnis führte, gewählt:
<body>
<div>
....
</div>
<div>
....
</div>
<div>
....
</div>
<div>
Hierunter soll etwas positioniert werden
</div>
<div id="mutter">
<div>
....
</div>
<div>
....
</div>
<div>
....
</div>
<div style="position:absolute; top:10px; right:10px; width:140px; padding:3px; border-width:2px; border-style:solid;">
Dieser Container soll oben positioniert werden.
</div>
</div>
</body>
Meiner Ansicht nach ist <div id="mutter"> das Elternelement meines zu positionierenden Containers. Aus diesem Grund sollte dieser Container 10px unterhalb des Anfangs von <div id="mutter"> beginnen.
Er beginnt aber 10px unterhalb von <body>.
Weiss jemand, was ich falsch mache?
Im Voraus besten Dank!
Euer
Dr. B.
Hallo.
Weiss jemand, was ich falsch mache?
Du verwendest zu viele <div>s und erklärst deine Frage zu ungenau.
MfG, at
Hallo Dr.,
Weiss jemand, was ich falsch mache?
Weise dem Div mit der ID "Mutter" position:relative; left:auto; top:auto; zu und dein Problem sollte behoben sein.
MfG, Mülli
Vielen Dank! So klappt das!
Hi,
Meiner Ansicht nach ist <div id="mutter"> das Elternelement meines zu positionierenden Containers. Aus diesem Grund sollte dieser Container 10px unterhalb des Anfangs von <div id="mutter"> beginnen.
Absolut unlogisch. Das Elternelement ist NICHT Basis für die absolute Positionierung (auch wenn in SelfHTML sowas drinsteht - das ist falsch).
Basis für die absolute Positionierung ist das innerste Vorfahrenelement, dessen Positionierung nicht static ist, bei dessen Fehlen der Viewport.
Er beginnt aber 10px unterhalb von <body>.
Logisch, da der body zufällig dieselbe Position wie der Viewport hat.
cu,
Andreas
Hallo Andreas,
Absolut unlogisch. Das Elternelement ist NICHT Basis für die absolute Positionierung (auch wenn in SelfHTML sowas drinsteht - das ist falsch).
Das steht auch in anderen Veröffentlichungen so. Warum nur? Übersetzungsfehler oder Verständnisproblem?
Basis für die absolute Positionierung ist das innerste Vorfahrenelement, dessen Positionierung nicht static ist, bei dessen Fehlen der Viewport.
Damit habe ich mich nun gestern und auch heute rumgeschlagen. Ich habe in der CSS2-Spezifikation nachgelesen. Das Original ist schwierig zu verstehen, die deutsche Übersetzung aber auch. In etwa erahne ich jetzt die Zusammenhänge, nachdem ich heute versucht habe, sie mir an einem Beispiel klar zu machen.
Frage: Ist das innerste (wieso das innerste? vielleicht besser das nächstliegende) Vorfahrenelement nicht normalerweise das Elternelement?
Die nächsten Vorfahren sind für mich die Eltern und nicht die Großeltern oder Urgroßeltern oder irgendwelche anderen Verwandten.
Im Abschnitt 9.8.4 heißt es u.a.:
The containing block for a positioned box is established by the
nearest positioned ancestor (or, if none exists, the initial containing block).
Und im Beispiel weiter unten wird von child und parent gesprochen.
Könnte man also sagen: containing block = parent? Und ein darin positionierter block = child?
Vom Standpunkt der Positionierung ist das Elternelement eben ein umschließender Block (containing block). Und die Divs, die in einem containing block enthalten sind, sind die Kinder.
Könnte man das so interpretieren?
Grüsse aus Neubrandenburg
Erika Schiener
Hi,
Das steht auch in anderen Veröffentlichungen so. Warum nur? Übersetzungsfehler oder Verständnisproblem?
das könnte z.B. daher kommen, daß die Informationen von Selfhtml ungeprüft übernommen wurden.
Basis für die absolute Positionierung ist das innerste Vorfahrenelement, dessen Positionierung nicht static ist, bei dessen Fehlen der Viewport.
Frage: Ist das innerste (wieso das innerste? vielleicht besser das nächstliegende) Vorfahrenelement nicht normalerweise das Elternelement?
Nicht, wenn Du bis zum Ende liest: "...dessen Positionierung nicht static ist"
Es ist das Elternelement, sofern dieses anders als stitic positioniert ist, das Großelternelement, sofern dieses anders als static und das Elternelement static positioniert ist ...
Und "nächstliegendes" beschreibt den Sachverhalt mMn undeutlicher als "innerstes", vor allem wenn Du das Gegenteil "äußerstes" mit in die Betrachtung einbeziehst.
freundliche Grüße
Ingo
Hallo Ingo,
hier im Forum geht die Post aber schnell ab! Ich war inzwischen mit Hausarbeit und Einkaufen beschäftigt und dabei kommen mir mitunter auch ganz gute Gedanken. Mir ist dabei eingefallen, dass nicht jedes Elternelement ein umschließender Block ist, ein Elternelement ist nur dann ein umschließender Block, wenn es absolut, relativ oder fix positioniert (also anders als static) positioniert ist. Du hast das weiter unten sehr schön mit Eltern und Großeltern erklärt. Mudguards Beitrag hatte ich zwar bis zum Ende gelesen, aber halt nicht richtig durchdacht. Manchesmal fällt der Groschen eben ein bißchen langsam. Ich hoffe, dass ich das Problem jetzt richtig verstanden habe.
Das steht auch in anderen Veröffentlichungen so. Warum nur? Übersetzungsfehler oder Verständnisproblem?
das könnte z.B. daher kommen, daß die Informationen von Selfhtml ungeprüft übernommen wurden.
So wird es sein. Auch in SELFHTML gibt es falsche/ungenaue Formulierungen. Das zeigt, dass die Materie kompliziert ist und dass die Originaldokumente sehr kompliziert und wenig anschaulich formuliert wurden.
Und "nächstliegendes" beschreibt den Sachverhalt mMn undeutlicher als "innerstes", vor allem wenn Du das Gegenteil "äußerstes" mit in die Betrachtung einbeziehst.
Von "innen" und "außen" habe ich andere, vielleicht falsche Vorstellungen - siehe meine Antwort auf den letzten Beitrag von Mudguard. Für den Sachverhalt der Positionierung ist diese Wortwahl imho eher unwichtig.
Dankeschön für Deine Antwort und freundliche Grüsse aus Neubrandenburg von Erika Schiener
Hi,
Mir ist dabei eingefallen, dass nicht jedes Elternelement ein umschließender Block ist, ein Elternelement ist nur dann ein umschließender Block, wenn es absolut, relativ oder fix positioniert (also anders als static) positioniert ist.
Auch diese Formulierung wäre leider falsch bzw. unvollständig. Da nur Block-Elemente andere Block-Elemente enthalten dürfen, ist ein Elternelement natürlich immer ein umschließendes Block-Element. Nur richtet sich die absolute Positionierung nicht unbedingt nach diesem. ;-)
Du siehst daran, wie schwierig es ist, einen komplizierten Sachverhalt absolut richtig und nicht falsch interpretierbar auszudrücken.
So wird es sein. Auch in SELFHTML gibt es falsche/ungenaue Formulierungen. Das zeigt, dass die Materie kompliziert ist und dass die Originaldokumente sehr kompliziert und wenig anschaulich formuliert wurden.
Stimmt. Aber mit Selfhtml 8.1 werden dank der gemeldeten Fehler von vielen Nutzern hoffentlich alle Unklarheiten so gut es geht beseitigt sein.
Von "innen" und "außen" habe ich andere, vielleicht falsche Vorstellungen - siehe meine Antwort auf den letzten Beitrag von Mudguard. Für den Sachverhalt der Positionierung ist diese Wortwahl imho eher unwichtig.
Das mag sein. Ich habe dabei z.B. das Bild mit den Schachteln in der Schachtel vor Augen - kennst Du bestimmt auch: machst Du eine Schachtel auf, kannst Du eine kleinere herausholen, aus dieser wieder eine kleinere usw. - die letzte ist in meinen Augen als "innerste" recht zutreffend beschrieben.
freundliche Grüße
Ingo
Hi,
Auch diese Formulierung wäre leider falsch bzw. unvollständig. Da nur Block-Elemente andere Block-Elemente enthalten dürfen, ist ein Elternelement natürlich immer ein umschließendes Block-Element.
Du vermischst hier CSS-blocklevel-Elemente mit HTML-Blocklevel-Elementen.
cu,
Andreas
Guten Morgen,
Mir ist dabei eingefallen, dass nicht jedes Elternelement ein umschließender Block ist, .....
Auch diese Formulierung wäre leider falsch bzw. unvollständig. Da nur Block-Elemente andere Block-Elemente enthalten dürfen, ist ein Elternelement natürlich immer ein umschließendes Block-Element. Nur richtet sich die absolute Positionierung nicht unbedingt nach diesem. ;-)
Du siehst daran, wie schwierig es ist, einen komplizierten Sachverhalt absolut richtig und nicht falsch interpretierbar auszudrücken.
Da stimme ich Dir voll zu. Wobei Deine o.a. Formulierung leider auch nicht exakt ist - siehe Beitrag von Mudguard.
Ich habe nunmehr zusätzlich in drei Büchern nachgelesen (Shafer/Yank, Uklrike Häßler und Kai Laborenz/1. und 2.Auflage). In den genannten Büchern gibt es viele richtige und manche falsche oder ungenaue Formulierungen. Auch zur Positionierung. Lernen kann man aus allen drei Büchern, die Autoren gehen auch auf Inhalte ein, die in Selfhtml 8/Abschnitt CSS seinerzeit (noch) nicht behandelt wurden.
Am kürzesten und prägnantesten scheint mir Jendryschik das Problem der Positionierung auf den Punkt gebracht zu haben:
http://jendryschik.de/wsdev/einfuehrung/css/positionierung
Im Zweifelsfalls gilt natürlich das Original. Ich halte aber auch Sekundärliteratur für Otto Normalverbraucher bis hin zu Lieschen Müller für wichtig. Hut ab vor allen Autoren, denen es gelingt, schwierige Sachverhalte einfach _und_ richtig zu erklären.
Von "innen" und "außen" .....
Das mag sein. Ich habe dabei z.B. das Bild mit den Schachteln in der Schachtel vor Augen - kennst Du bestimmt auch: machst Du eine Schachtel auf, kannst Du eine kleinere herausholen, aus dieser wieder eine kleinere usw. - die letzte ist in meinen Augen als "innerste" recht zutreffend beschrieben.
Natürlich kenne ich dieses Schachtel- oder Matroschka-Prinzip. Ich sehe das genauso. Der viewport bzw. body wäre dann bei der Positionierung die äußerste Schachtel, ein nachfolgend absolut positioniertes Element wäre denn bezogen auf den viewport oder body eine innere Schachtel und für ein nachfolgendes absolut positioniertes Element die *nächstliegende* (nearest) äußere Schachtel usw. Haben wir denn da aneinander vorbei diskutiert?
Bei MJ liest sich die Erläuterung zur absoluten Positionierung so:
"Die Box wird relativ zu ihrem umschließenden Block verschoben. Dabei gilt folgendes zu beachten: Der umschließende Block für eine absolut positionierte Box wird durch das nächste positionierte Elternelement oder, falls es kein solches gibt, durch den umschließenden Ausgangsblock (also den Viewport) gebildet." Er spricht hier also vom *nächsten* positionierten Elternelement und nicht vom *innersten*.
Ansonsten: Ein Beispiel sagt oft mehr als viele Worte.
Mir hat diese Diskussion jedenfalls geholfen, ein mit CSS gestaltetes Layout einer vorliegenden Webseite zu analysieren und besser zu verstehen.
Freundliche Grüsse aus Neubrandenburg
erika
Heureka,
wieder mal beim Kochen kam mir die Erleuchtung;-)
MJ hat recht, wenn er vom _nächsten_ positionierten Elternelement spricht, sofern ich mir den Sachverhalt von unten nach oben betrachte, und dieses Elternelement ist zugleich das das _innerste_ Vorfahrenelement (dessen Position nicht static ist), wenn ich die _Schachteln_ von außen nach innen auspacke, und damit habe ich Mudguards Formulierung jetzt endlich auch verstanden.
Na dann Mahlzeit (heut gibt es nur Aufgewärmtes)
erika
Hi,
Absolut unlogisch. Das Elternelement ist NICHT Basis für die absolute Positionierung (auch wenn in SelfHTML sowas drinsteht - das ist falsch).
Das steht auch in anderen Veröffentlichungen so. Warum nur? Übersetzungsfehler oder Verständnisproblem?
Vielleicht haben die anderen bei SelfHTML abgeschrieben?
Basis für die absolute Positionierung ist das innerste Vorfahrenelement, dessen Positionierung nicht static ist, bei dessen Fehlen der Viewport.
Frage: Ist das innerste (wieso das innerste? vielleicht besser das nächstliegende) Vorfahrenelement nicht normalerweise das Elternelement?
Ja, das innerste Vorfahrenelement ist das Elternelement.
Und _in_nerste ist für mich logischer, weil die Elemente _in_einander verschachtelt sind.
Vom Standpunkt der Positionierung ist das Elternelement eben ein umschließender Block (containing block). Und die Divs, die in einem containing block enthalten sind, sind die Kinder.
Seh ich anders. Eltern, Großeltern, ..., Kinder, Enkel ... beziehen sich rein auf die Dokumentstruktur.
Ganz egal ob und wenn ja wie positioniert wird.
cu,
Andreas
Hallo Andreas,
Basis für die absolute Positionierung ist das innerste Vorfahrenelement, dessen Positionierung nicht static ist, bei dessen Fehlen der Viewport.
Frage: Ist das innerste (wieso das innerste? vielleicht besser das nächstliegende) Vorfahrenelement nicht normalerweise das Elternelement?
Ja, das innerste Vorfahrenelement ist das Elternelement.
Fein! Da hab ich doch nicht ganz so falsch gedacht.
Und _in_nerste ist für mich logischer, weil die Elemente _in_einander verschachtelt sind.
Ja, das ist mir klar, die Elemente sind ineinander verschachtelt. Aber warum soll das Vorfahrenelement das *innerste* sein? Wenn das Vorfahrenelement tatsächlich ein *Elternelement* ist (was nicht in jedem Fall zutrifft, siehe weiter unten), dann liegt das *Kindelement* ganz oder zum Teil innendrin und wäre imho eigentlich das innere Element in Bezug auf das Vorfahren-Eltern-Element, und das Vorfahrenelement wäre das äußere Element. Nebenbei: Für *nearest* wäre mir die Übersetzung *nächstliegend* zutreffender. Aber das sind vielleicht eher Spitzfindigkeiten. Und vielleicht denke ich auch falsch. Wichtiger ist die nachfolgende Antwort von Dir.
Vom Standpunkt der Positionierung ist das Elternelement eben ein umschließender Block (containing block). Und die Divs, die in einem containing block enthalten sind, sind die Kinder.
Seh ich anders. Eltern, Großeltern, ..., Kinder, Enkel ... beziehen sich rein auf die Dokumentstruktur.
Ganz egal ob und wenn ja wie positioniert wird.
Richtig, das ist mir inzwischen auch an meinem Testbeispiel klargeworden. Und Du hast ja auch geschrieben: "... Basis für die absolute Positionierung ist das innerste Vorfahrenelement, dessen Positionierung nicht static ist, bei dessen Fehlen der Viewport."
Ich will es noch einmal mit meinen Worten sagen (nur zu meinem eigenen Verständnis): Ein umschließender Block ist ein Elternelement, aber nicht *jedes* Elternelement ist ein umschließender Block.
Es handelt sich, mal abgesehen vom viewport oder vom body, nur dann um einen umschließenden Block, wenn das (Eltern)-Element absolut, relativ oder fix positioniert ist. Ich hoffe, dass ich das jetzt verstanden habe.
Der Weg zur Erkenntnis ist wirklich mit großen Holper- und Stolpersteinen gepflastert. Dein Beitrag hat mich wieder ein Stückchen weiter gebracht, danke!
Grüsse aus Neubrandenburg
Erika Schiener