Effect of z-index value to RP and AP blocks

1. Starting setup
2. Apply z-index:1 to AP1
3. Apply z-index to both AP blocks
4. Apply z-index:11 to RP1
5. Apply z-index:21 to RP1
6. Apply higher z-index to RP2 than to RP1, but identical z-index to AP1 and AP2
7. Apply z-index where RP2 > RP1, and AP2 < AP1, both being higher then any RP's
8. Conclusion

Higher z-index means higher position in the z-axis. Here, AP1 is above AP2, because it has higher z-index value.

• Again, this is wrong. Only IE gets it right.

If they had the same value, then the order of their positioned parents is obeyed, and AP1 would be below AP2.

If I move RP1 so that it overlaps with RP2, we get clearer picture of spec violation. RP1 is below RP2 (which is OK), but AP1 is above AP2 which is wrong.

• Funniest thing happens in Opera. It will stack RP1 at the bottom, then non-positioned paragraph (?!) between RPs and then RP2 at the top. And I'm not even sure is this correct or not. Only Opera does this, so I'm inclined to think it is incorrect.

Continue to next page >>

RP = relatively positioned element
AP = absolutely positioned element