nicht angemeldet
Hallo Dirk,
Ich würde gern die Position eines <div> Bereiches relativ zu seinem Elternelement festlegen. Weiß auch, wie man da vorgeht, allerdings hab ich nirgends (jedenfalls nicht in Selfhtml) gefunden, wie man ein Elternelement anlegt oder was das eigentlich ist. Momentan schein es das body-Element zu sein, ich würde aber gern die Überschrift als Elternteil deklarieren, wie mach ich das?
»Ein Element relativ zu seinem Elternelement positionieren« kann vieles bedeuten. Was mit Elternelement gemeint ist, wurde ja bereits veranschaulicht. Es lässt sich unter anderem durch die padding-Eigenschaft des Elternelements und durch seine margin-Eigenschaft darin »positionieren«.
Beispielsweise:
<p>bla</p>
<div id="a">
<p id="b">bla</p>
</div>
<p>bla</p>
#a {border:1px solid red; padding-left:2em;}
#b {border:1px solid navy;}
oder
#a {border:1px solid red;}
#b {border:1px solid navy; margin:3em 0 0 2em;}
Eine andere Lesart wäre das Positionieren über die CSS-Eigenschaft position. Position:absolute zusammen mit top/left/bottom/right bezieht sich auf den besagten containing block, das ist das nächste übergeordnete positionierte Element (das heißt, mit einem position-Wert anders als static) bzw. dessen Box. Falls sich kein solches positioniertes Element findet, gilt der initial containing block (umschließender Ausgangsblock), das ist die Box des Wurzelelements html mit den Ausmaßen der Seite zur Verfügung stehenden Fläche.
Du kannst also einem Element position:absolute oder position:relative (bei letzterem bleibt das Element im normalen Fluß, wenn top/left/bottom/right incht gesetzt werden) geben und einem Kindelement ebenfalls position:absolute. Die Eigenschaften top/left/bottom/right beziehen sich dann auf die Dimensionen (genauer gesagt auf die der padding egde) des übergeordneten positionierten Elements.
Beispielsweise:
#a {width:15em; height:10em; position:relative; border:1px solid red;}
#b {position:absolute; top:4em; left:8em; margin:0; padding:1em; border:1px solid navy;}
Welche Methode letztlich angemessen ist, hängt von deinen konkreten Anforderungen/der konkreten Zielsetzung ab.
Grüße,
Mathias