Das ist nun mal wirklich was Einfaches: Bei absolut positionierten <div>-Bereichen - und nur bei diesen - kann man durch Angabe eines Wertes für "z-index" im Style bestimmen, welches <div> oben und welches unten zu liegen kommt, falls sich zwei oder mehrere jemals in die Quere kommen sollten. Kleinere z liegen über größeren. Beliebig viele; immer.
Der Effekt tritt auch dann auf, wenn man bei dieser absoluten Positionierung relative Maßangaben verwendet: Oben bleibt oben und unten bleibt unten. Da relative Maßangaben aber, wie soll man sagen, nun mal eine relative Sache sind, verschiebt sich die kunstvolle Geometrie meines auf 800 x 600 ausgelegten Beispiels bei Änderung des Browserfensters mehr oder weniger stark.
Da kann man nur absolute Maßzahlen verwenden. Oder halt nix machen.