Link-Tipp für position:absolute / relative?

[FredBow]

Hallo,

hat jemand einen Link-Tipp zu einer Seite, die sich fortgeschritten mit der Verwendung von position:absolute und position:relative auseinandersetzt?

Ich kenne im Grunde die Unterschiede der relativen und absoluten Positionierung. Ich stolpere nur immer mal wieder, wenn es frickliger wird. Ich hab schon das eine oder andere CSS Beispiel gesehen (hab leider gerad kein konkretes im Blick), wo ich nicht verstehe, warum dort gerade nun absolut positioniert wurde. Ohne geht es nicht, aber warum? Was passiert da?

Hat da jemand eine Empfehlung? Die SuFu wirft n Haufen Zeug aus, mit dem ich bisher nicht so ganz glücklich geworden bin ...

Fred

 

[MyBad]

Hier ist das recht schick erklärt:
http://www.mediaevent.de/tutorial/css-position-absolute-relative.html

Vielleicht noch ergänzend: absolut positionierte Elemente orientieren sich am relativ positionierten Eltern-Element. Möchte man also etwas innerhalb eines Elements absolut positionieren, muss man das übergeordnete Element (Eltern-Element) zunächst relativ positionieren.

Beispiel:

<div class="relativepos">
    RELATIV
    <div class="absolutepos">ABSOLUT</div>
</div>

 

[FredBow]

Vielen Dank! Das ist echt prima erklärt.

Gibt es da darüber hinaus evtl. noch das eine oder andere "Geheimnis" zu position? Wenn ich das noch recht im Kopf behalten habe, war bei einem der Beispiele position:absolute wichtig, um den Container aufzublähen. Hab ich nur position:relative verwendet, fiel der Container in sich zusammen. Das schien mir unlogisch.

Daraus die allgemeine Frage formuliert: Gibt es eine Kombination von CSS-Regeln, damit sich ein relatives Elternelement in seiner Höhe und Breite entsprechend seines Kindes an passt, wenn das Kindelement absolut positioniert ist?

Im Grund etwa folgendes Beispiel:

<div class="container">
   <div class="absolute-box">
       Hier steht Text. <br> <br> Viel Text, der die Box aufbläht.
   </div>
</div>

    .container{
        position:relative;
        background:#000000;
        padding:10px;
    }

    .absolute-box{
        position:absolute;
        background:#cccccc;
        width:100px;
        height:100px;
    }

So geht es erstmal nicht. Klar, absolute Blöcke fallen aus dem Dokumentenfluß raus. Gibt es einen Trick, mit dem man so was hin bekommt?

Fred

 

[Raphale]

Hi Fred,
eine klares Nein zu der Frage ob ein Elternelement sich nach einem absolute positioniertes Element richten kann. Mit Javascript schon

Warum dein Container bei einer relativen positionierung zusammengefallen ist lässt sich ohne Code erstmal nicht klären
Eventuell lag es am Zustand des Elementes (block, inline, inline-block) wobei beim inline-element diverse Zustände wie z.B. Höhe und Breite nicht angegeben werden können ?

anhand eines 'absolute' positionierten Kind-Elementes kannst du das Elternelement nicht bearbeiten bzw. die Eigenschaften steuern oder vererben, da eine absolute positionierung eines Elementes, dieses aus dem Dokumentenfluss entnimmt.

Insofern sich ein Element im Dokumentfluss befinden, verschiebt es durch die Größe und Höhe wiederrum die betroffenen Elemente.

Hier nochmal eine meiner Lieblings Tutorial Seiten für Webdesign bezogen auf positionieren: CSS-Tricks

 

[afr0kalypse]

Hi Fredbow. In deinem Beispiel sehe ich keinen Grund einen absolut positionierten Div zu nutzen.
Ein konkreteres Beispiel wäre da besser.