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

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

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:absolute;
top:50px;
left:10px;
width:80%;
height:100px;
background:red;
}

#div2 {
position:absolute;
top:150px;
left:10px;
width:80%;
height:700px;
background:darkblue;
}

</style>

Sehen Sie sich die Unterschiede bei den Attributen top, left, width, height an, um deren Wirkung beurteilen zu können.

Wichtig! Wenn Sie Bereiche absolut positionieren, müssen Sie je nach Absicht mit den Attributen top, left/right, width, height arbeiten. Wenn Sie das Attribut height nicht definieren, kann der Bereich so zu sagen mit dem Inhalt mitwachsen, sonst würde er abgeschnitten.