[TYPO3-german] [ot: css] ebenen übereinander: position:relative

Wed Jan 18 11:06:47 CET 2006

> ich habe in einer zentrierenden Tabelle mehrere Ebenen, die über
> einander liegen sollen. Dies erreiche ich mit:
>
> style="position:relative; top:0px; height: 50px"
>   für Layer1,
>
> style="position:relative; top:-50px; height: 50px"
>   für Layer2,
>
> style="position:relative; top:-100px; height: 50px"
>   für Layer3.
>
> Anschließend kommen weitere Tabellen und Ebenen.

Warum ausgrechnet Tabellen? Ginge doch sicher auch mit DIV ...

> Unter Firefox/Mozilla werden folgende Elemente bei der Höhe 50px
> ausgegeben, IE summiert auf 150px.

Weil er die Teile bei position:relative quasi erst aufbaut und dann
verschiebt.
Wenn Du mit positiven Werten arbeiten würdest, würden nachfolgende Elemente
die vorhergehenden überlagern.
So entstehen Lücken. Firefox macht das teilweise auch.

> Ist dies ein weiteres Beispiel für das "Boxing model" mit
> unterschiedlicher Interpretation der verschiedenen Browser?

Nein. Aber unschön ist es dennoch.

> Wie kann ich den Code für beide Browser gestalten?
>
> Mit "position:absolute" kann ich nicht arbeiten, weil sonst die
> Zentrierung durch die Tabelle wegfällt. Mir bleibt nur
> "position:relative", oder?

Nein. Denn auch position:absolute muß sich nicht immer auf den Browser
beziehen. Wenn Du mit verschachtelten Elementen arbeitetst, wird immer das
nächstgelegene Elternelement verwendet, das nicht position:static hat.
Weil position:static der default ist, der bei keinerlei Positions-Angaben
verwendet wird, hat position:absolute zunächst mal den Effekt, sich immer am
Fenster selbst auszurichten.
Nicht so, wenn Du einem Elternelement position:relative zuweist.

Beispiel:

<body style="text-align:center;">
    <div style="position:relative; margin-left:auto; margin-right:auto;
width:790px; height:450px; background:#fc9;">
        <div style="position:absolute; top:0; left:0; width:100px;
height:100px; background:#f00;">Testbox</div>
        <div style="position:absolute; top:0; right:0; width:100px;
height:100px; background:#f00;">Testbox</div>
        <div style="position:absolute; bottom:0; left:0; width:100px;
height:100px; background:#f00;">Testbox</div>
        <div style="position:absolute; bottom:0; right:0; width:100px;
height:100px; background:#f00;">Testbox</div>
    </div>
</body>

Ergibt ein zentriertes DIV Element mit apricotfarbenem Hintergrund.
Darin findest Du an jeder Ecke ein rotes Quadrat.

Spiel mal damit rum

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
http://www.cybercraft.de