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.
- The image is floated,
<body>is positioned (relative), both<div>have a (different) z-index: wrong display — the text overlaps the image. testfile - Same as above, but no z-index: idem. testfile
- 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 - But float the image, and
<body>is not positioned:
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.
- 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 - Same as above, but no z-index: idem. testfile
- 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 - But float the image, and
<body>is not positioned:
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.
