Internet Explorer 5 Mac: oddities

Layering problems with stacked positioned elements

When using absolute positioning, Mac IE does not respect the stacking order of the various elements. Children of absolute positioned block elements acquire a stacking order on their own, different from the layering of their parent boxes. This is even more obvious if one has set the positioning of <body> to position:relative. Not only has this implications on how a document displays. If DHTML is used to modify position, display, visibility of elements, and some more (in essence, things that imply the repainting of (part of) the document after loading time), this can even affect the flow of the document (note about this site). Below is an overview of some of the problems. It is by no means complete. Screenshots are linked from the respective testfiles.

Set up: 2 absolute positioned (AP) <div>s, overlaying each other. One div contains an image, the other one a bit of (anonymous) text. Tagging this text as <p> does not affect the problems.

  1. The image is floated, <body> is positioned (relative), both <div> have a (different) z-index: wrong display — the text overlaps the image. testfile
  2. Same as above, but no z-index: idem. testfile
  3. If the image is not floated and <body> is positioned, then everything displays fine. Z-index on the AP<div>s doesn't matter. testfile
  4. But float the image, and <body> is not positioned:
    • without z-index on the AP<div>s: wrong: image is in front of second AP <div>, text overlaps image. testfile
    • with z-index on the AP<div>s: ok. testfile

Set up: 2 fixed positioned <div>s, overlaying each other. As above, one div contains an image, the other one a bit of (anonymous) text.

  1. The image is floated, <body> is positioned (relative), both <div> have a (different) z-index: wrong display. The main text (in a static <div>) also overlaps the image when scrolling. testfile
  2. Same as above, but no z-index: idem. testfile
  3. If the image is not floated and <body> is positioned, then it displays fine. z-index on the AP<div>s doesn't matter. testfile
  4. But float the image, and <body> is not positioned:
    • without z-index on the AP<div>s: wrong; text in positioned div overlaps image, but text in the main, static <div> is behind everything. testfile
    • with z-index on the AP<div>s: ok. testfile

note: The grey <div> comes first in the source code, and (when used) has a z-index of 1. The purple <div> comes in second in the source code, and has a z-index of 2. Modifying those settings, or the order of the code might give completely different results. More fun to play with. Note also that <body> has always a z-index of 0, but this doesn't affect the results in any way.

section – contents

Also around here
[ Empty spaces ]
a weblog

This collection of documents and test cases related to Internet Explorer 5 for Mac is no longer maintained and is only kept online for historical reasons.

Comments and suggestions: are not needed anymore. Thanks to all who provided info and tips in the past.

File last updated: September 09, 2009.

back to top

permanent location: http://www.l-c-n.com/IE5tests/positioning/index.shtml.