Verständisfrage zu Relativ

[Sara_k]

Ich probiere mich derzeit ein wenig mit position:relative; rum nur irgendwie kommt immer ein anderes Ergebnis heraus als ich erwarten würde.

Angenommen ich habe eine Box

Links und Oben jeweils 100px Abstand und ebenso 100px hoch und breit.

Sie würde sich nun am Body Element orientieren.


Wenn ich nun eine weitere Box mit selben Eigenschaften hinpflanze müsste sich diese nun an der ersten orientieren (richtig?). Sie müsste also etwa 300px links und 300px oben an Abstand haben ?
(100px Abstand der ersten Box, + 100px Breite der ersten Box + 100px Abstand)

Stattdessen wird sie einfach unter die erste gestanzt ohne einen einzigen Pixel Abstand.


Also statt

 []

   []

kommt

 []
 []

heraus...

	<div style="position: relative; top:100px; left:100px; width:100px; height:100px; background:#999;">
		Just a Test<br>
	</div>

	<div style="position: relative; top:100px; left:100px; width:100px; height:100px; background:#999;">
		Just a Test<br>
	</div>

was habe ich falsch verstanden?

Alternativ dachte ich das es ja so sein könne das sich die zweite Box nur am Anfangspunkt der ersten orientiert, aber auch das scheint nicht ganz zu denn dann müsste sie immer noch 200px Abstand zum linken Rand besitzen...

Also was ist daran relativ?

 

[prm]

Relativ bedeutet lediglich, dass eine box dort steht, wo sie ohnehin steht.
Durch Angabe von top/left-Werten wird sie von ihrem Normalstandort aus verschoben.

In Bezug zu einer relativ positionierten Box kann man eine weitere absolut positionieren. Dann ist der Bezug der absolut positionierten Box die vorhergehende relativ positionierte, so eine entsprechende Verschachtelung vorliegt.

Dein Denkfehler liegt darin, dass in dem Beispiel beide Boxen eigenständig und jeweils auf sich bezogen relativ positioniert sind.

Lies dir vielleicht auch mal das durch, vielleicht wird's dann klarer: Position: absolute - Anwendungsbeispiele