flo: CSS Layer positionierung

Hallo zusammen!

Ich habe folgendes Problem:

code:
<css>
.container {position:absolut; top:200px; left:150px; width:900px; height:400px;}
.kasten1 {position:relative; top:20px; left:20px; width;50px; height:50px}
.kasten2 {position:relative; top:50px; left:120px; width;50px; height:50px}
.kasten3 {position:relative; top:20px; left:500px; width;50px; height:50px}
</css>
<body>
<div class="container">
<div class="kasten1">
  text1
</div>
<div class="kasten2">
  text2
</div>
<div class="kasten3">
  text3
</div>
</div>
</body>

Ich möchte, dass die position der divs kasten1-kasten3 immer vom div container ausgehen!

jetzt werden der kasten-div von "left:XXpx" korrekt angezeigt!
die positionierung "top:YYpx" wird aber nicht bei jedem kasten von dem oberen rand her gemessen. obwohl kasten3 "top:20px" hat, wird er unterhalb von kasten2 angezeigt!?

  1. Hi

    wenn ich dein problem richtig verstehe, hast du den unterschied zwischen relativer und absoluter positionierung nicht ganz verstanden. :)

    "absolute" positioniert ein element zum nächsten absolute positionierten elternelement (bzw. dessen ecke links oben).

    "relative" positioniert ein element zu der position an der es eigentlich erscheinen würde wenn es nicht positioniert werden würde.

    so long
    Ole
    (8-)>

    --
    Trotz Equalizer und Compressor, der Sound wird matschig unn nett
    bässer!
    1. hi,

      "absolute" positioniert ein element zum nächsten absolute positionierten elternelement (bzw. dessen ecke links oben).

      nicht ganz.
      absolute positionierung nimmt bezug auf das nächsthöhere _vorfahren_element, dessen position-angabe _vom default static abweicht_;
      und beim fehlen eines solchen auf den viewport.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hi,

    <css>

    Das Element gibt es nicht in HTML.

    .container {position:absolut; top:200px; left:150px; width:900px; height:400px;}

    absolut ist kein gültiger Wert.

    .kasten1 {position:relative; top:20px; left:20px; width;50px; height:50px}

    Bei width fehlt der Wert, 50px ist keine CSS-Eigenschaft, und wenn, würde der Wert fehlen.

    .kasten2 {position:relative; top:50px; left:120px; width;50px; height:50px}
    .kasten3 {position:relative; top:20px; left:500px; width;50px; height:50px}

    siehe .kasten1

    Ich möchte, dass die position der divs kasten1-kasten3 immer vom div container ausgehen!

    Warum benutzt Du dann position:relative? Da muß schon absolute her.
    container muß dann natürlich auch (anders als bisher) eine von static abweichende Positionierung haben.

    die positionierung "top:YYpx" wird aber nicht bei jedem kasten von dem oberen rand her gemessen. obwohl kasten3 "top:20px" hat, wird er unterhalb von kasten2 angezeigt!?

    Das ist die logische Folge von position:relative.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.