nicht angemeldet
Ein per position:relative positioniertes Element nimmt aus Sicht aller umliegenden Elemente exakt die Position und Größe ein, die es im normalen Elementfluß gehabt hätte. Dabei kann es ohne weiteres zu Überschneidungen kommen.
Und wie kann ich das Problem lösen?
Soweit ich das überblicke, willst Du oben, über der "Wir freuen uns"-Überschrift eine 100 Pixel breite Fläche haben? Wenn Du da noch was reinhaben willst, dann mach dieses zusätzliche Element 100 Pixel groß, um den optischen und den logischen Elementfluß beisammen zu halten.
Geht das nicht, oder soll die Fläche tatsächlich frei bleiben, verpasse der Überschrift einfach einen oberen Außenrand (margin-top) von 100 Pixeln. Dann sitzt die Überschrift dort, wo sie jetzt sitzt, und alle nachfolgenden Elemente orientieren sich auch an dieser Position.
Noch zweieinhalb Tipps:
Die Sache mit der Klaviatur ist eine nette Idee; verwende ebenfalls die Außenrahmengeschichte, um den nötigen Abstand zu schaffen.
Die Überschriften beginnen in einem Dokument immer bei <h1>, nicht bei <h4>. Du kannst Schriftart und -größe der Überschriften mit CSS wunderbar anpassen.
Mit Ausnahme der Tabelle mit den Vorsitzenden kannst Du sämtliche Tabellen rauswerfen. Insbesondere diejenige, die die "Wir freuen uns"-Überschrift umgibt, ist fehl am Platze. Formatiere gleich das <h4>-Element (und mache daraus ein <h1>) bzw. die <p>-Blöcke.
Die <h3>-Elemente in der Vorsitzendentabelle sind etwas deplaziert. Verwende besser <th> (statt <td>), damit wird ebenfalls eine Überschrift gekennzeichnet, und zwar eine Tabellenzelle mit Überschrift - also genau das richtige.
Verpasse dem Dokument unbedingt einen strict-Kopf, um die Browser in den Standardmodus zu schalten und somit verlässliche Ergebnisse zu erhalten (siehe http://www.hut.fi/~hsivonen/doctype.html). In Sachen IE: Teste mit dem IE 6, nicht mit dem IE 5!
Es sind noch ein paar winzige Tippfehler im Text ("formular", "druch", "stellvertr.Direktor").
Gruß,
soenk.e