Christian S.: Positionierungsproblem im Firefox

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

  1. Lass die Positionsangabe weg, dann geht es.
    Wenn du die Position ganz genau haben möchtest, dann setze doch margin auf 0.

  2. 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

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. 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

  3. 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!