margin top und margin bottom bei absoluter positionierung

[Susanne Hugo]

Hi, ich versuche mich an einer Seite mit absoluter Positionierung, zu sehen unter:

http://www.dorettehugo.de/test/tesztzindex.html

Soweit ist das alles in Ordnung, nur wenn ich mir die Seite auf einem kleineren Bildschirm ansehe, bzw. den Schriftgrad auf 200% erhöhe, sind margin top und bottom verschwunden.

Woran liegt das? Ich habe schon probiert, die em Angaben in % umzuwandeln, aber dann verreißt es mir die absolute Positionierung.

Hier mein CSS:

* { margin: 0;  padding: 0 border:  0 }

body  { font-family:       Arial; font-size: 1em }

div#eins   {
 margin-top:        -20em;
 margin-right:      auto;
 margin-left:       -21em;
 padding:           0;
 position:          fixed;
 z-index:           0;
 top:               50%;
 left:              50%;
  }

* html div#eins {position: absolute}

div#zwei  {
 text-align:  left;
 margin-top:   -20em;
 margin-right: auto;
 margin-left:  -21em;
 padding:      5em 1em 1em 5em;
 position:     fixed;
 z-index:      4;
 top:          50%;
 left:         50%;
 width:        15em;
 height:       20em;
 }

* html div#zwei {position: absolute}

div#drei  {
 text-align:  left;
 margin-top:   -20em;
 margin-right: auto;
 margin-left:  auto;
 padding:      5em 5em 1em 1em;
 position:     fixed;
 z-index:      4;
 top:          50%;
 left:         50%;
 width:        16em;
 height:       20em;
 }

* html div#drei {position: absolute}

img#mitte {
 margin: 0;
 padding: 0;
 width:   42em;
 height:  40em }

Ich wäre für einen Lösungsvorschlag sehr dankbar. Gruß Susanne