Ein Seitenelement mit relativer Positionierung gibt Ihnen die Kontrolle, um darin befindliche Kindelemente absolut zu positionieren.
Für manche ist das offensichtlich. Für andere mag dies einer dieser CSS „Ah-ha!“-Momente sein. Ich erinnere mich, dass es für mich eine große Sache war, als ich es zum ersten Mal „verstanden“ habe.
Hier ist eine visuelle Darstellung
Die relative Positionierung des Elternelements ist hier der entscheidende Punkt. Sehen Sie, was passieren würde, wenn Sie das vergessen würden
Das ist eine signifikante Änderung. Was passiert ist, dass die absolut positionierten Elemente sich relativ zum Body-Element positionieren und nicht zu ihrem direkten Elternelement. Wenn sich also das Browserfenster vergrößert, bleibt das unten links mit dem Browserfenster verbunden, anstatt im Inneren zu verharren, wie sein gut erzogener Bruder im ersten Bild.
Sobald Sie dieses Konzept „verinnerlicht“ haben (Trommelwirbel), werden Sie es überall wiederfinden und Beispiele dafür bei anderen entdecken. Es ist so, als würde man ein neues Wort lernen und es dann überall hören. Ja.
Sie können die obige Demo hier ausprobieren
Wie wäre es mit ein paar Beispielen?
Ich bin entzückt.
 | Ein „Schließen“-Button, den Sie immer oben links in einem Feld positionieren möchten (um ein Betriebssystemfenster zu replizieren). |
 | Ein „Home“-Button oben rechts im Fenster platziert, damit sich Ihre Benutzer niemals zu verloren fühlen. |
 | Eine Erinnerung auf einem Anmeldeformular, die Benutzer daran erinnert, dass sie sich oben anmelden sollen, wenn sie bereits Mitglied sind. |
 | „Nach oben“-Links, die unten rechts in jedem großen Textblock platziert werden. |
Ah ha! Danke Chris. :)
Das ist definitiv MEIN „a-ha!“-CSS-Moment. Als ich das begriffen habe, habe ich erkannt, dass ich alles tun kann.
Stimmt es, dass die Unterstützung für „position:“ in Browsern nicht sehr solide ist? Denn ich habe früher alle meine Seiten mit Positionierung erstellt und mir wurde gesagt, dass ich wegen der eingeschränkten Unterstützung immer versuchen sollte, meine Spalten mit Floats zu organisieren.
Die absolut positionierten Elemente positionieren sich relativ zum ersten Vorfahren, der nicht statisch positioniert ist, und da keiner vorhanden ist, positionieren sie sich relativ zu html (dies kann man sehen, indem man margin-top zu body hinzufügt, und das Back-Home-Bild bewegt sich nicht)
Die Vorschau sieht in Safari schrecklich aus, sie ist wirklich durcheinander o.o Hast du sie getestet? Oder ist es meine Safari 4.0 Developer Edition =/
In Safari 3.1.1 sieht es bei mir OK aus. Der Button „Anmelden oben“ ist etwas höher, als er sein sollte. Möglicherweise ein Unterschied in der Art und Weise, wie Safari seine Fieldsets rendert.
Dieser Trick kann auch verwendet werden, um Image Maps mit CSS zu erstellen. Dies kann viel flexibler sein und mehr tun als die üblichen HTML-Image-Maps.
Das ist etwas, das ich aus semantischen Gründen immer falsch verstehe; ich denke immer, ich sollte Kindelemente RELATIV zu einem ABSOLUTEN positionieren, aber tatsächlich sind es absolute Elemente relativ zu einem relativen, was falsch erscheint!
Ich bin ein bisschen wie Epic. Ich dachte, wenn man auf etwas „relative“ anwendet, macht das dieses Ding relativ zu dem, was es enthielt. Ich hatte irgendwie begriffen, dass ich falsch lag, gerade letzte Nacht, aber es ist gut, jemanden zu hören, der es sagt, da es in meiner Logik immer noch nicht richtig erschien.
Danke
Guter Beitrag. Ich hatte kürzlich auch diesen „a-ha“-Moment. Macht die Dinge wirklich einfacher. Ich fragte mich, warum meine Boxen weit links im Browserfenster positioniert wurden, wenn sie sich in einer anderen Box befanden. Aber a-ha! Ich musste der äußeren Box eine relative Position geben.
Manchmal müssen die angeblich einfachen Dinge mit klaren Worten und einer guten Grafik erklärt werden.
Oh mein Gott! Mein Bruder hat mir neulich eine ähnliche Frage gestellt… Das ist definitiv ein A-ha. Ich war der Meinung, dass die Standardeinstellung relativ sei, daher wusste ich nicht, dass das passiert… da haben Sie es!
Ich werde meinem Bruder den Link schicken :D
Ich hatte einen solchen Moment, als ich herausfand, dass die absolut positionierten Elemente ohne Parameter (rechts, oben usw.) dort blieben, wo sie normalerweise hingehören, sie aber aus dem Fluss nahmen, sodass sie über den anderen Elementen landeten. Ich habe es benutzt, um ein Bild mit transparentem Hintergrund leicht über einige Divs zu legen.
Brillante Beispiele, Chris. Gut gemacht!
Ich arbeite schon eine Weile mit CSS, und dies war definitiv eine wichtige Lektion, als ich sie vor ein oder zwei Wochen lernte. Ihr Beitrag könnte mir jedoch helfen, sie tatsächlich zu behalten. Danke dafür..!
hm, total OT, aber weißt du zufällig, was das für eine graue Schrift in deinen Icon-Beispielen ist, die ist wirklich schön…?
@James: „Agenda“
Perfekte Zeit. Gibt es eine Möglichkeit, ein Element horizontal zu zentrieren und es vertikal unten zu platzieren?
Noch ein Ah-Ha und ich LIEBE DICH, danke.
Ah-ha!
:D DANKE!! Das hat mir in der Vergangenheit viel Kopfzerbrechen bereitet. Jetzt habe ich es endlich verstanden. ^.^
Danke für dieses Tutorial. Ich habe immer Probleme mit der Positionierung mit CSS. Jetzt habe ich mehr Wissen.
Grüße,
AM
Ich schätze, man lernt wirklich jeden Tag etwas Neues (solange es solche Seiten gibt :)
Und ich dachte, ich hätte all die Jahre Floats benutzt.
Ist relative Positionierung besser als absolute Positionierung?
Danke für dieses Tutorial. Ich habe immer Probleme mit der Positionierung mit CSS. Jetzt habe ich mehr Wissen.
Hätte nicht gedacht, dass das passiert, aber: WOW! Was für ein A-HA-Moment hier :) Habe es für verschachtelte Listen verwendet, um sie horizontal anzuzeigen, funktioniert (soweit ich das jetzt beurteilen kann) großartig! Danke!
Gut gemacht
Ich habe ein relativ positioniertes Div ohne spezifische Höhe, mit einem absolut positionierten Div darin. Ich möchte, dass das relative Div sich dehnt, um das absolute aufzunehmen.
Das funktioniert nicht, da das absolut positionierte Div außerhalb der Grenzen des relativen Divs gerendert wird.
Z.B. Hier ist ein relatives Div, mit einem absoluten darin, um eine rote Box anzuzeigen.
reldiv {
position: relative;
text-align: left;
}
absdiv {
position: absolute;
top: 200;
left: 200;
width: 50px;
height: 50px;
border: 1px solid #ff0000;
}
Hallo
Gibt es eine Möglichkeit, das zu umgehen?
Gute Informationen, die man wissen muss!
…aber ich habe die gleiche Frage wie MeepMeep oben.
Wenn ein Container, der relativ positioniert ist und darin absolut positionierte Elemente hat, verwendet wird, werden die absolut positionierten Elemente aus dem normalen Fluss des Containers herausgenommen und der Container rendert „leer“. Dies ist besonders bemerkbar, wenn dem Container ein Hintergrund zugewiesen wird und er sich aufgrund des Flusses der darin befindlichen Elemente nicht mehr auf die entsprechende Größe „dehnt“.
Ich habe versucht, den „Clear Fix“ wie bei gefloateten Elementen zu verwenden, aber die absolute Positionierung scheint sie vollständig aus dem Fluss zu nehmen, sodass diese Korrektur nicht funktioniert.
Haben CSS-Meister eine Lösung? (Bitte sagen Sie nicht Floats)
Definitiv A-ha! Danke!
Diese Beziehung zwischen Eltern und Kind ist nicht immer gut.
Das Problem tritt auf, wenn Sie einen relativen Elternteil und ein absolut positioniertes Kind außerhalb des Eltern-Box mit 100% Breite verwenden müssen. Auf diese Weise erhält das Kind die Breite des Elternteils und nicht die „normale“ Breite.
Ich habe dafür keine Workarounds gefunden. Wenn Sie also Ideen haben, diese Regel vom Elternteil zu stornieren, posten Sie bitte. =)
Lassen Sie mich einfach wiedergeben, was ich glaube, hier gelernt zu haben. Das Elternelement sollte mit {position: relative} positioniert werden, damit Sie {position: absolute} auf den darin enthaltenen Elementen verwenden können. Wenn das der Fall ist und es so aussieht, dann habe ich es falsch gemacht. Ich hatte gerade eine Unterhaltung mit einer Person in einem Forum, die meinte, man sollte {position: absolute} sehr selten verwenden. Wenn ich diesen Beitrag richtig verstehe, sollte ich ihn jedoch verwenden, um Elemente zu positionieren, die in einem relativ positionierten Elternelement wie einem Div enthalten sind. Wenn das korrekt ist, dann denke ich, würde ich ihn ziemlich oft verwenden, nur nicht so, wie ich ihn bisher verwendet habe.
Du hast mir gerade den Tag gerettet!
Ah-ha!! :) ++
Danke! Hat mir viel Arbeit erspart!
Hallo Chris, danke für diese Erklärung.
Ich versuche zu verstehen, wo die CSS 2-Spezifikation (http://www.w3.org/TR/CSS2/visuren.html#choose-position) das beschreibt, was Sie über die Notwendigkeit sagten, dass das Elternteil position: relative haben muss. Die Spezifikation besagt, dass für eine Box mit absoluter Positionierung die oberen/unteren/linken/rechten „Eigenschaften Offsets in Bezug auf den Containerblock der Box angeben.“ Und der Containerblock wird definiert als „bedeutet „der Containerblock, in dem die Box lebt.“ Ich sehe nichts darüber, dass das Elternteil (oder ein Vorfahre) position: relative haben muss, um der Containerblock zu sein, auf den sich die Offsets des Nachfahrens beziehen.
Ich habe andere Leute sagen hören, was Sie sagten, aber ich versuche, das in der Spezifikation zu finden, und bisher konnte ich es nicht.
Danke, es löst wirklich mein Problem. Machen Sie weiter so :)
Einstein wäre stolz darauf, dass Relativität auch in CSS gilt!
Das funktioniert perfekt in Chrome, aber aus irgendeinem Grund behandelt Firefox das absolut positionierte Div wie normal. Irgendwelche Ideen, wie man FF dazu bringt, sich richtig zu verhalten?
Hallo Chris,
Vielen Dank, Ihre Website hat mir sehr geholfen.
Es gibt ein Problem, für das ich keine Lösung finden konnte, weder selbst noch im Web. Das Problem ist, wie man einen Container dazu bringt, die absolut positionierten Divs innerhalb eines relativen Divs zu enthalten. Es versteht sich von selbst, dass die Höhen dynamisch sind und wir kein JS verwenden wollen.
Haben Sie eine Idee?
Danke Chris, ein weiterer großartiger Artikel. Die Diagramme im Artikel sind sehr anschaulich.
Danke Chris! Du bist so hilfreich! Kannst du mir bitte sagen, gibt es eine Möglichkeit, Kindelemente aus einem relativ positionierten Elternelement herauszunehmen, so wie statisch positionierte Elemente es tun? Wenn Sie Zeit haben, bitte..
In der Demo verweisen mehrere Label-Elemente mit „for“-Attributen auf die falschen oder nicht existierenden Eingabeelemente.
label for=”name” Benutzername /label
input id=”username” type=”text” name=”username” /input
sollte sein label for”username”
Endlich habe ich ein klares Beispiel für die Verwendung von absoluter und relativer Positionierung. Ich war vorher sehr verwirrt darüber. Danke!!!!!!
Endlich *ein klares Beispiel….
Perfekt!
Aha! Das ist also der Grund, warum meine Divs am Seitenrand verankert waren!!
Ein sehr einfacher, aber sehr hilfreicher Tipp!
Chris, du rockst!
Ah-Ha! Danke!!!
„Die relative Positionierung des Elternteils ist hier der entscheidende Punkt“ JA! DANKE!
„Ah-ha!“ Moment, danke!
Ich gehöre zu diesen „Ah ha!“-Leuten. Ich bin eher ein Programmierer als ein CSS-Designer, daher war das genau das, was ich wissen musste! Danke!