Thomas Touzimsky: Element "on the fly" als Child eines anderen definieren?

Beitrag lesen

Aber vielleicht erläuterst du uns dein Problem etwas genauer?

Klar doch.

Ich habe mehrere Elemente in meiner HTML-Seite, also in etwa so...

<div id="container">
   <div id="element-1">...</div>
   <div id="element-2">
      <div id="element-2-1>...</div>
      <div id="element-2-2>...</div>
   </div>
   <div id="element-3">...</div>
</div>
...
<div id="zusatzelement">...</div>

Anregung hierzu ist der CSS Zen Garden, der in seiner HTML-Datei auch acht zusätzliche <div>-Elemente bereitstellt, um - je nach Design - zusätzliche Platzhalter für Bilder bereitzustellen.

Nun habe ich auf unserer Seite aber das Problem, daß der Inhalt innerhalb des Browserfensters zentriert ist. Liegt nun das Zusatzelement außerhalb des #containers, kann ich es zwar über absolute Positionierung an die richtige Höhe setzen (z.B. 40 Pixel vom oberen Rand aus), aber eine vertikalte Positionierung fällt flach, weil sich das Element nicht mitbewegt, wenn sich der #container bei unterschiedlichen Größen des Browserfensters neu zentriert.

Innerhalb des #containers kann ich es auch nicht setzen, weil hier zwar die vertikale Ausrichtung klappt und es sich mitverschiebt, ich aber die Höhe nicht korrekt setzen kann, weil es innerhalb des #containers ja relativ positioniert werden muss. In der HTML-Seite liegt das Zusatzelement aber am Ende des Dokuments, also "unterhalb" aller anderen Elemente - ich müsste also die Position über "top: -600px" setzen. Wenn sich jetzt die Menge des Seiteninhalts ändert und damit auch die Länge des #containers, verschiebt sich das so relativ positionierte Element nach oben oder unten, was es aber auch nicht machen soll.

Wenn ich nun sagen könnte: "Hey, das #zusatzelement ist ein Child von #container und steht gleich am Anfang, könnte ich es von der linken oberen Ecke aus immer 60px nach unten und 10px nach rechts verschieben". Nur leider scheint das nicht machbar zu sein...