Hier könnte eine Überschrift stehen ... Sie sehen Beispiele für zwei relative positionierte <div>-Elemente

Der rote Bereich ist #div1 und der blaue #div2.

m

m

Hier könnte etwas Text stehen ...

Für Sie der Code der zwei <div>-Elemente, die im <head> im <style>-Abschnitt definiert werden:

<style>

body {color:black; background:white; margin:0; padding:0;}

#div1 {
position:relative;
top:50px;
left:10px;
width:100%;
background:red;
}

#div2 {
position:relative;
left:10px;
width:240px;
height:400px;
background:darkblue;
}

</style>

In diesem Beispiel klebt #div2 praktisch unten an #div2, da kein Wert für das top-Attribut angegeben ist.

Allerdings kann man dieses Ergebnis auch ganz ohne das position-Attribut erreichen.