isabel: relatives Positionieren

Liebe Leute,

mal wieder streß mit CSS. Ich will geren das das blaue Div sich automatisch unterr das gelbe Div ,setzt und dachte, das das mit relativer Positioniereung geht??
So wie ich das mache aber nicht?

Wer kann mir helfen?

Grüße
ISabel

<html>
<head>

<style type="text/css">
<!--
.green{position:absolute; border:1px solid black; width:500px; height:500px; background-color:green;}
.top { position:absolute; top:100px; left:200px; width:200px; height:100px;background-color: yellow;}
.blue{ position:relative; height:100px; width:100px; border:1px solid black; background-color: blue;}

-->
</style>

</head>

<body>
<div class="green">

<div class="top">
 </div>

<div class="blue">

</div>

</div>
</body>
</html>

  1. Hallo isabel

    mal wieder streß mit CSS. Ich will geren das das blaue Div sich automatisch unterr das gelbe Div ,setzt und dachte, das das mit relativer Positioniereung geht??
    So wie ich das mache aber nicht?

    position:relative bedeutet nur, dass das Element relativ zu _seiner_ Ausgangsposition platziert wird.

    .green{position:absolute; border:1px solid black; width:500px; height:500px; background-color:green;}
    .top { position:absolute; top:100px; left:200px; width:200px; height:100px;background-color: yellow;}
    .blue{ position:relative; height:100px; width:100px; border:1px solid black; background-color: blue;}
    [...]
    <div class="green">
       <div class="top"></div>
       <div class="blue"></div>
    </div>

    Da du ja das gelbe DIV-Element absolut positionierst und auch seine Höhe auch festgelegt ist, kannst du doch auch das blaue DIV-Element absolut positionieren:

    position:absolute; top:200px; left:200px;

    Einfach nur den Abstand zum oberen Rand und die höhe des gelben DIVs addieren.

    Schöne Grüße

    Johannes

    --
    ss:| zu:) ls:[ fo:) de:] va:) ch:? sh:( n4:& rl:( br:< js:| ie:{ fl:( mo:}
    1. Ne leider, nicht so einfach,

      Das blaue Element soll sich immer direkt unter das gelbe setzten egal wie groß das gelbe ist. Es ist für einen allgmeinen Aufbau, indem sich die höehe des gelben Elements verändern kann!

      Sagt Dir das was?

      lg
      Isabel

      1. Hi,

        Das blaue Element soll sich immer direkt unter das gelbe setzten egal wie groß das gelbe ist. Es ist für einen allgmeinen Aufbau, indem sich die höehe des gelben Elements verändern kann!

        Dann mußt Du entweder ein div um das blaue + gelbe rumlegen und dieses neue div positionieren
        oder aber das gelbe ins blaue packen und dann an dessen Unterkante ausrichten (top:100% sollte klappen, hab es aber nicht getestet...)
        oder darauf hoffen, daß jemand noch ne andere Idee hat... ;-)
        cu,
        Andreas

        --
        Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
        http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
        1. Hi,

          oder aber das gelbe ins blaue packen und dann an dessen Unterkante ausrichten (top:100% sollte klappen, hab es aber nicht getestet...)

          sorry, umgekehrt, das blaue ins gelbe und das blaue per top ausrichten...

          cu,
          Andreas

          --
          Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
          http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/