Positionierung: Kombinationen

"position:absolute" innenhalb von "position:static"

Ein Div in einem Div. Das umgebende rote Div hat kein Positionsattribut, also gilt: "position:static".
Dieses grüne Div ist auf "position:absolute" gesetzt, zusätzlich "top:100px" (also 100px von oben) und "left:130px" (130px von links).
Bezugselement für die "top"- und "left"-Angaben ist der Body, also 100px bzw.130px vom Anzeigebereich des Browsers aus gesehen!

HTML:


		
<div class="aussen">
	<div class="innen">
		<p>Ein Div in einem Div. Das umgebende rote Div hat kein Positionsattribut, also gilt: "position:static".<br>
			Dieses grüne Div ist auf <span class="underline">"position:absolute" </span>gesetzt, zusätzlich "top:100px" (also 100px von oben) und "left:130px" (130px von links).<br>
			Bezugselement für die "top"- und "left"-Angaben ist der Body, also 100px bzw.130px vom Anzeigebereich des Browsers aus gesehen!</p>
	</div>					
</div>
			
		

CSS


			
.aussen {				/* Äußeres DIV */
	background:#f00;
	width:600px;
	height:400px;
	}	
	
.innen {				/* inneres DIV */
	background:#0f0;
	width:400px;
	position:absolute;
	}	
			
		

"position:relative" innerhalb von "position:static"

Ein Div in einem Div. Das umgebende rote Div hat kein Positionsattribut, also gilt: "position:static".
Dieses grüne Div ist auf "position:relative" gesetzt, "top" und "left" wie oben auch.
Bezugselement für die "top"- und "left"-Angaben ist das umgebende Div!


"position:absolute" innerhalb von "position:relative"

Ein Div in einem Div. Das umgebende rote Div hat das Positionsattribut"position:relative".
Dieses grüne Div ist auf "position:absolute" gesetzt, "top" und "left" wie oben auch.
Durch "top:100px" hat das grüne Div jetzt 100px Abstand zum oberen Rand des umgebenden roten Divs.
Da das Elternelement auf relative gesetzt ist, richtet sich das absolut gesetzte Kindelement (das grüne Div hier) nicht nach dem Body, sondern nach seinem Elternelement.


"position:relative" innenhalb von "position:relative"

Hier sind umgebendes sowie innenes Div auf "position:relative" gesetzt, der Effekt ist hier der gleiche wie "absolute" innenhalb "relative".
Welchen Wert man nimmt macht man davon abhängig, ob die weiteren folgenden Elemente "nachrutschen" sollen (bei :absolute) oder so reagieren sollen, als ob das Div noch an seinem Platz wäre (:relative)