iPhone Firmware 1.1.1 CSS Strange Z-index Application
Typically, browsers apply z-index in a more relative way, even if you specify position:absolute. However, in my preliminary tests, it seems that the iPhone actually applies z-index in an absolute way no matter where an element appears in the DOM.
Usually, if you place a block level element, inside another block level element, and then place an element which is a peer of the top level block level element at the same depth in the DOM. A z-index applied on the nested element will not be able to appear on a layer above the element that comes after the parent element, no matter what z-index is applied. That sounded bizarre, but here is the visual example:
So the div that has “some text at the same level as the parent” will, in most cases, given that each div is position: absolute, top:0px, left:0px, or that they are all layered on top of each other, should appear at the top.
On the iPhone, this is not the case, it seems that the div that has “some text” will appear above the others because it has the z-index attribute establishing it on a layer above.
I have for some time argued that the z-index should be absolutely enforced, even though I understand why it is implemented like it is. Apple may change this with later revisions of the iPhone Safari, but for now I am going to exploit this as well as I can.