nicht angemeldet
Hallo,
Wie schaut das bei position:relative; aus?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS-Position</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<h1>Beispiele zu CSS position</h1>
<h2>Relative Positionierung</h2>
<p>Ein relativ positioniertes Element bezieht die Werte von left, right, top und bottom auf sich selbst, also auf seine eigentliche Position im Elementfluss. Das nachfolgende P-Element würde normalerweise direkt unter diesem P-Element stehen (Margins natürlich eingeschlossen). Durch position:relative; top:-4em; left:5em; wird es aber um 4em höher und um 5em weiter rechts dargestellt als normalerweise.</p>
<p style="position:relative; top:-4em; left:5em; background-color:#0F0;">Beispiel mit position:relative; top:-4em; left:5em;</p>
<h2>Absolute Positionierung</h2>
<p>Ein absolut positioniertes Element bezieht die Werte von left, right, top und bottom auf das Element, welches es umgibt und gleichzeitig nicht position:static (Standard) dargestellt wird. Gibt es ein solches umgebendes Element nicht, dann werden die Werte von left, right, top und bottom auf den Viewport (Browserfenster, Frame) bezogen. Das nachfolgende P-Element befindet sich zwar in einem DIV-Element. Dieses wird aber mit Standard-Position static dargestellt. Deshalb wird das P-Element am Viewport ausgerichtet.</p>
<div style="background-color:#00F; border:1px solid black;"><p style="position:absolute; top:5em; left:5em; background-color:#F00;">Beispiel mit position:absolute; top:5em; left:5em; im Viewport, zu sehen an der left-Position, die sich _nicht_ am BODY orientiert.</p></div>
<p>Das nachfolgende P-Element befindet sich in einem DIV-Element mit position:relative. Deshalb beziehen sich seine Werte für left, right, top und bottom auf dieses umgebende Element.</p>
<div style="position:relative; background-color:#F00; border:1px solid black;"><p style="position:absolute; top:5em; left:5em; background-color:#00F;">Beispiel mit position:absolute; top:5em; left:5em; im DIV</p></div>
<h2>Dimensionen der Elemente</h2>
<p>Beide DIV-Elemente im Beispiel verlieren durch die absolute Positionierung ihren Inhalt, so dass sie eine Höhe von 0 erhalten.</p>
</body>
</html>
viele Grüße
Axel