Positionierungsproblem im Firefox
Christian S.
- css
Hi,
ich habe folgendes Stück Code:
<table style="position:absolute;left:10px;top:300px">
<tr style="position:relative">
<td style="position:relative">
<div style="position:absolute;left:0px;top:0px">TEST</div>
</td>
</tr>
</table>
Ich würde jetzt erwarten, dass "TEST" bei 10px / 300px angezeigt wird. IE und Opera machen das auch richtig. Aber Firefox stellt sich quer und zeigt "TEST" in der linken oberen Ecke des body elements an.
Was mache ich falsch? Oder ists ein FF Bug? (Die anderen beiden Browser machen es ja richtig.
Dachte eigentlich CSS Positions angaben beziehen sich immer auf den offsetParent, in dem Fall das Table element.
Gruß
Christian
Lass die Positionsangabe weg, dann geht es.
Wenn du die Position ganz genau haben möchtest, dann setze doch margin auf 0.
Hi,
<table style="position:absolute;left:10px;top:300px">
<tr style="position:relative">
<td style="position:relative">
<div style="position:absolute;left:0px;top:0px">TEST</div>
</td>
</tr>
</table>
http://www.w3.org/TR/CSS21/visuren.html#propdef-position
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
Und alles, was dann auf diesem undefined basiert, ist logischerweise ebenso undefined (so wie hier die Position des div).
Wozu hast Du überhaupt die einzellige Tabelle?
Ich würde jetzt erwarten, dass "TEST" bei 10px / 300px angezeigt wird.
IE und Opera machen das auch richtig.
Das ist ja auch nicht schwer. Da das Verhalten "undefined" ist, ist jede Darstellung richtig.
Aber Firefox stellt sich quer und zeigt "TEST" in der linken oberen Ecke des body elements an.
Firefox hat halt eine andere Variante von "undefined" - falsch ist das aber genausowenig.
Was mache ich falsch?
Du gehst davon aus, daß "undefined" genau Deiner Vorstellung entspricht.
Und Du machst äußerst seltsame Quelltext-Konstruktionen.
Oder ists ein FF Bug?
Nein.
(Die anderen beiden Browser machen es ja richtig.
Auch Firefox macht es richtig.
Dachte eigentlich CSS Positions angaben beziehen sich immer auf den offsetParent, in dem Fall das Table element.
Was soll ein offsetParent sein?
Bei absoluter Positionierung bezieht sich die Position auf das nächsthöhere Vorfahrenelement, das eine von static abweichende position hat.
Und das ist die td - für die ist aber die Auswirkung von position:relative undefiniert - und damit auch für das davon abhängige div.
Wenn Du das div bei left:10 und top:300px haben willst, dann positionier es dort und laß die Tabelle einfach weg.
cu,
Andreas
http://www.w3.org/TR/CSS21/visuren.html#propdef-position
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.Und alles, was dann auf diesem undefined basiert, ist logischerweise ebenso undefined (so wie hier die Position des div).
Wenn ich position:relative weglasse ändert sich nichts an meinem Effekt.
Wozu hast Du überhaupt die einzellige Tabelle?
Nur als Beispiel.
Was soll ein offsetParent sein?
Bei absoluter Positionierung bezieht sich die Position auf das nächsthöhere Vorfahrenelement, das eine von static abweichende position hat.
ich denke dass ist der offsetParent. Hast du noch nie JavaScript programmiert? Dort heißt die eigenschaft so.
Wie gesagt, das Problem liegt nicht an position:relative.
Gruß
Christian
Das Beispiel macht zwar keinen Sinn, aber das Problem habe ich im allgemeinen auch.
-------------------------------
| Div0 |
| |
| ------------------------ |
| | | |
| | Div2 | |
| | | |
| | | |
| | | |
| ------------------------ |
| |
-------------------------------
In Div2 möchte ich ein Element an Stelle 0px, 0px absolut positionieren. Jedoch wird es im Div0 an stelle 0 0 positioniert.
Was kann man machen?
Wie gesagt nur im FF.
Danke!